@charset "utf-8";
/* CSS Document */
body{ font-family: 'Roboto', sans-serif;}
h1,h2,h3,h4,h5,h6{font-family: 'Poppins', sans-serif;}
h3, h5, h6 {text-transform:uppercase}
a:hover{text-decoration:none;}
.table td{vertical-align:middle}
.checked{color:#e3d60f; z-index:10}
.pro-toggle, .credit-toggle, .menu-toggle, .menu-close{cursor:pointer}

.btn-primary {background:#5130dc; border-color:#5130dc; text-transform:uppercase}
.btn-primary:hover {background:#4b2bca; border-color:#4b2bca;}
.text-primary{color:#5130dc !important}
.btn-warning {background:#e3d60f; border-color:#e3d60f; color:#000}
.btn-warning:hover {background:#f6e700; border-color:#f6e700;}

.no-top-radius{border-top-left-radius:0 !important; border-top-right-radius:0 !important}
#menu{height:100vh; z-index:100; display:none; overflow: auto;}
.thumb{width:100%; min-height:97px; max-height: 109px; display:block}
.subcolor{height:30px; width:30px; text-align:center; padding-top:2px; border-radius:10px !important; cursor:pointer}

.bg-1{background:#e2e2e2; color:#000}
.bg-2{background:#9030dc; color:#fff}
.bg-3{background:#5130dc; color:#fff}
.bg-4{background:#2179eb; color:#fff}
.bg-5{background:#0fc4d2; color:#000}
.bg-6{background:#0fd264; color:#000}
.bg-7{background:#f99f07; color:#000}
.bg-8{background:#f91e07; color:#fff}
.bg-9{background:#000000; color:#fff}

.card-link{color:#000; display:block; font-weight:500}
.card-link:hover{color:#000;}
.card-header{position:relative}
.card-header .material-icons{position:absolute; right:10px; top:8px; padding:4px;}

.modal-content{border-radius:15px; overflow:hidden;}
.modal-footer button {height:60px}

.log-form{margin-top:22%}

.rich-search-backdrop{position: fixed; z-index: 11; background-color: rgba(0,0,0,0.6); width: 100%; height: 100vh; left: 0; top: 54px; display: none;}
.rich-search{position: absolute; padding: 0 15px; background-color: #fff; border-radius: 4px; border:1px solid #eee; width: 100%; z-index: 1111; top: 40px; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; display: none}
.rich-search ul, .rich-search li{margin: 0; padding: 0; list-style: none;}
.rich {border-bottom: 1px solid #eee; padding-bottom: 15px !important; padding-top: 15px !important; cursor: pointer;}
.lg-hide{display: inline-block;}
.page-link{color: #888; min-height: 31px}
.page-link:hover{color: #555;}
.page-link .material-icons{font-size: 22px}
.action{min-width: 135px !important}
.move{min-width: 32px !important}
.prod-name{min-width: 200px !important}
.single-product{cursor: pointer;}
.single-product-active{border: 1px solid #cfc4ff !important; box-shadow: 0 .5rem .5rem rgba(81,48,220,.2)!important; border-radius: 10px; overflow: hidden }
.loader-backdrop{position: fixed; z-index: 10000000; width: 100%; height: 100vh; background-color: rgba(255,255,255,.9); display: none;}

.loader{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-40%, -50%);
  text-align: center;
}
.loader span{animation: loader-07 0.4s linear infinite; font-weight: bold; font-size: 18px}
.max-name-char {
    white-space: nowrap;
    width: 27ch;
    height: 20px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    clear: both;
}


@keyframes loader-07 {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 0;
	}
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #5130dc;
    border-color: #5130dc;
}
.prd-name{font-size: 14px}

.fetch-check{left:0; top:0; width:100%; height:100%; opacity:0.5; z-index:10; position: absolute; background: #fff}
.fetch-check-input{opacity:0.5;}
.tab{color: #fff !important; cursor: pointer;}

#upload-demo{
	width: 300px;
	height: 350px;
  padding-bottom:50px;
  margin: auto;
}

.link-active-top {
    color: #f0e125 !important;
    position: absolute;
    background: #3417b2;
    left: 0px;
    margin-left: 0px;
    padding-top: 8px;
    padding-bottom: 16px;
    top: -8px;
    border-bottom: 4px solid #f0e125;
    width: 100%;
}

.char-limit{width: 280px; overflow: hidden; text-overflow: ellipsis;}

.notification{}

.modal-backdrop.show {
    opacity: .8;
}
.cart-blink{opacity: 1; animation-name: notif; animation-duration: 1s; animation-iteration-count: infinite;}
@keyframes notif {
  0% {opacity: 1;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}


@media(min-width:1200px) and (max-width:1900px)
{
	.subcolor{height:36px; width:36px; text-align:center; padding-top:5px; border-radius:10px !important}
	td .subcolor{height:28px; width:28px;}
	.log-form{margin-top:15%}
	.lg-hide{display: none !important}
}

@media(min-width:1024px) and (max-width:1200px)
{
	.detail-hide{display: none}
	.thumb{max-height: 79px}
	.thumb{min-height: 79px}
}



@media(min-width:320px) and (max-width:768px)
{
	.thumb{min-height:109px; display:block}
	.tooltip {display: none;}
	.rich-search{left:0; top:40px;}
	.lg-hide{display: inline-block;}
	#printInvoice table, #printInvoice .col-6{font-size: 12px !important}
	#menu{min-width: 360px; height: 80vh;  }
	.m-row{flex-direction: row !important}
	.pay-mode .card{width: 20%}
	.loader-07 {margin-top: 45%; margin-left: 45%}
	.char-limit{width: 140px; overflow: hidden; text-overflow: ellipsis;}
        .sm-hide{display: none;}
}

@media(min-width:320px) and (max-width:600px)
{
	.prd-name{font-size: 12px}
	.thumb{min-height:148px; display:block}
	.card .p-4 .form-control{font-size:14px; height:38px; padding-left: 10px}
	.invoice-stats h5{font-size: 18px;}
	.sm-hide{display: none;}
	#spc {width: 100%;}
}
@media(min-width:600px) and (max-width:640px)
{
	.prd-name{font-size: 14px}
	.thumb{min-height:238px; display:block}
	.single-product .col-md-8{padding-bottom: .75rem; font-size: 14px}
}
#pagination a {
    border: 1px solid #ddd;
    padding: 4px 8px;
    float: left;
}
#pagination b {
    border: 1px solid #007bff;
    padding: 4px 8px;
    float: left;
    background: #007bff;
    color: #fff;
}
.prd-list{width:72%; float: left;}
.view-toggle{text-align: center; position: relative; text-align: center;}

@media(min-width:320px) and (max-width:600px)
{
.prd-list{width:63%; float: left;}
}