.hide-perm {display: none!important;}
.dnone {display:none;}
body{overflow-y: auto;}
/* nv bar 
.nav-bar {border-bottom: 1px solid gainsboro; width: 100%; box-shadow: 0px 3px 3px #d0d0d0}
*/
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

#item-modal .title-detail {max-height: 200px;overflow:hidden;}
.button-add-to-cart {border: 1px solid gainsboro;margin-top:10px;}
.modal-closer {display:flex;flex-direction: row; align-content: flex-end;justify-content: flex-end;}
/*
#item-modal .item-name {
	overflow: hidden;
white-space: nowrap;
	text-overflow: ellipsis;
}
*/
/* Tool pit */
.t-pit { background-color: #f35588; color: white; padding: 10px; width: 200px;position: absolute;}
.pwp-helper {margin-left:50px;padding:2px;padding-left:10px;padding-right:10px;
	border-radius: 5px;cursor:pointer; font-style: italic;color:#f35588;
	/*font-family: gabriola, "calibri Constantia", "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	color:royalblue;
	*/
}
.pwp-helper-text-div {width:100%;height:0px;position:absolute;}
.helper-hide {width:fit-content;height:fit-content;float:right;color:white;}
.helper-text {background-color: #f35588; color: white; padding: 10px; width: 200px;min-height:20px;height:fit-content;position: relative;left:50px;border-radius: 5px;}
.pwp-helper:hover {background-color: #f35588;color:#fff;}
.pwp-helper-anchor {position:relative;top:14px;width:15px!important;height:15px!important;transform: rotate(45deg);background-color:#f35588;}

.x-closer {float:right!important;font-size: 1.5rem;font-weight: 700;line-height: 1;color: #000;text-shadow: 0 1px 0 #fff;opacity: .5;}

.fl-right {float:right;}
.pwp-flex{display:flex;}
.pwp-inline {display:inline-block;}
/*.pagination .prev {display:block!important;}*/

.grid-2x { display: grid; grid-template-columns: repeat(2, 1fr);}
.grid-2x-2a-3b { display: grid; grid-template-columns: 1fr 2fr;}
.grid-3x-1a-1b-1c { display: grid; grid-template-columns: repeat(3, 1fr);}
.flex { display: flex; flex-direction: row; flex-wrap: wrap;}
.gap-1 {gap: 10px}
.gap-2 {gap: 20px}
.gap-3 {gap: 30px}

.msO {margin-left:auto;margin-right: auto;}
/* Background colors */
.bg-primary {background-color: royalblue;color: white;}
.bg-green{background-color: green;color: white;}
.bg-red {background-color: red; color: white!important;}
.bg-error {background-color: mistyrose; color: red;}
.bg-success {background-color: aliceblue!important;}
.bg-success-pwp {background-color: aliceblue!important; color: deepskyblue;}
.bg-gray {background-color: gainsboro; color: black}
.bg-white {background-color: white; color: gray;}
.bg-default {background-color: gainsboro;color: slategray;}
.bg-light {background-color: #ffff;color: gray;}
.bg-dark {background-color: black;color: white;}
.bg-faint {background-color:#e9ecef;}

/* reverse-bg */
.primary-bg {background-color: #fff;color: royalblue;}
.green-bg {background-color: #fff;color: green;}
.error-bg {background-color: #fff; color: red!important;}
.success-bg {background-color: #fff; color: #5a4fcf!important;}
.red-bg {background-color: #fff; color: darkred!important;}
.gray-bg {background-color: #fff; color: gray;}
.white-bg {background-color: #fff; color: gray;}
.default-bg {background-color: #fff;color: slategray;}
.error-bg {background-color: #fff; color: darkred;}
.light-bg {background-color: #ffff;color: gray;}
.dark-bg {background-color: #fff;color: gray;}

.text-light, .text-white {color: #fff!important;}
.text-primary {color: royalblue;}
.text-black {color: black;}
.text-20 {font-size: 20px;}

.text-center {text-align: center;}
.tx-cap {text-transform: capitalize;}
.text-small {font-size: small;}
.text-smaller {font-size: smaller;}

/* float */
.fl-rhs {float: right;}
.fl-lhs {float: left;}

/* Border radius */
.r-t-10 {border-top-left-radius: 10px; border-top-right-radius: 10px;}
.r-b-10 {border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.r-5 {border-radius: 5px;}
.r-10 {border-radius: 10px;}
.r-15 {border-radius: 15px;}
.r-20 {border-radius: 20px;}

/* border */
.border-light-1 {border: 1px solid gainsboro;}
.border-light-2 {border: 2px solid gainsboro;}
.border-dark-1 {border: 1px solid gray;}
.border-dark-2 {border: 2px solid gray;}
.border-bott {border-bottom: 1px solid gainsboro;}

/* padding */
.p-1 {padding: 10px;}
.p-2 {padding: 20px}
.p-3 {padding: 30px}
.p-4 {padding: 40px}

/* tabs */
.light-tabs {border: 1px solid gainsboro; color: gray; background-color: #ffff;}
.light-tabs:hover { color: white; background-color: royalblue;}

/* shadow */
.shadow-bott {box-shadow: 0px 5px 5px red;}

/* cursor */
.pointer {cursor: pointer;}

.fix-x-bal-200 {left: calc(50vw - 100px);}
.fix-y-bal-auto {top: calc(46vh - 60px);}

/* width */
.fit-content {width: fit-content;}

/* margin */
.mt-1s {margin-top: 10px}
.mt-2s {margin-top: 20px}
.mt-3s {margin-top: 30px}
.mt-4s {margin-top: 40px}
.mt-5s {margin-top: 50px}
.mb-1s {margin-bottom: 10px}
.mb-2s {margin-bottom: 20px}
.mb-3s {margin-bottom: 30px}
.mb-4s {margin-bottom: 40px}
.mb-5s {margin-bottom: 50px}

.m-auto {margin-left: auto; margin-right: auto;}
.msO{margin-left: auto;margin-right: auto;}
/* positioning */
.fixed {position: fixed;}

/* boxes 
.alert-box {position: fixed; left: calc(50vw - 75px); top: calc(50vh - 100px);}
.queue-item {font-size: small; height: 250px;}
.slot-text {font-size: small; font-weight: bold; color: blue; padding: 5px; background-color: white; margin-bottom: 20px;}
.drop-box {margin-top:100px; box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px; width:200px; height: 200px; overflow: auto; background-color: #e8e8e8;}
.drop-box .dropable {font-size: 12px; background-color:salmon; box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; margin-bottom: 40px; border-radius: 10px;}
*/

/* width */
.w-20s {width:20px;}
.w-30s {width:30px;}
.w-40s {width:40px;}
.w-50s {width:50px;}
.w-60s {width:60px;}
.w-70s {width:70px;}
.w-80s {width:80px;}
.w-90s {width:90px;}
.w-100s {width:100px;}
.w-110s {width:110px;}
.w-120s {width:120px;}
.w-130s {width:130px;}
.w-140s {width:140px;}
.w-150s {width:150px;}
.w-160s {width:160px;}
.w-170s {width:170px;}
.w-180s {width:180px;}

.w-10p {width:10%;}
.w-20p {width:20%;}
.w-30p {width:30%;}
.w-40p {width:40%;}
.w-50p {width:50%;}
.w-60p {width:60%;}
.w-70p {width:70%;}
.w-80p {width:80%;}
.w-90p {width:90%;}
.w-100p {width: 100%;}



.w-150 {width: 150px;}
.w-200 {width: 200px;}
.w-250 {width: 250px;}
.w-300 {width: 300px;}

.w-100p-30s {width: calc(100% - 30px);}

/* heights */
.h-150s {height:150px;}

/* z-index, the last item should always bez-max */
.z-1 {z-index:1001;}
.z-2 {z-index:1002;}
.z-3 {z-index:1003;}
.z-4 {z-index:1004;}
.z-5 {z-index:1005;}
.z-max {z-index:900000000;}
.z-max-2 {z-index:9000000002;}

/* text size */
.bold{font-weight:bold!important;}
.tx-11{font-size: 11px!important;}
.tx-12{font-size: 12px!important;}
.tx-12{font-size: 13px!important;}
.tx-14{font-size: 14px!important;}
.tx-15{font-size: 15px!important;}
.tx-16{font-size: 16px!important;}
.tx-17{font-size: 17px!important;}
.tx-18{font-size: 18px!important;}
.tx-19{font-size: 19px!important;}
.tx-20{font-size: 20px!important;}
.tx-21{font-size: 21px!important;}
.tx-22{font-size: 22px!important;}
.tx-23{font-size: 23px!important;}
.tx-24{font-size: 24px!important;}
.tx-25{font-size: 25px!important;}
.tx-26{font-size: 26px!important;}
.tx-27{font-size: 27px!important;}
.tx-28{font-size: 28px!important;}
.tx-29{font-size: 29px!important;}
.tx-30{font-size: 30px!important;}

/* scrolling */
.ovf-y-scroll {overflow-y: auto;}
.ovf-x-hd {overflow-x: hidden;}
.scroll-fine::-webkit-scrollbar {
    width: 10px;
}

.scroll-fine::-webkit-scrollbar-track {
    background-color: #f6f6f6;
}

.scroll-fine::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: silver;
	border-radius: 5px;
}

.gray-shade {background-color: #d8d8d8;}
/*powpa custom global styles*/

/*powpa background color*/

.pwp-green-bg, .btn-primary {background-color: #007944; color: white;}
.pwp-btn-danger {background-color: #f35588; color: white;}
.pwp-danger-bg{background-color: #f35588;}
.text-pwp-primary {color: #007944;}
.text-pwp-danger {color: #f35588;}

.btn-outline-primary {border:1px solid #007944;}

/*powpa container styles and container flex styles*/
.G-bg{
	background-color: white;
	border-radius: 0.5rem;
	padding: 1.5rem;
	box-shadow: 0 0 0.0rem 0.1rem rgba(240, 240, 240, 1);
}

.free-G-bg{
	background-color: rgba(255,255,255,0.5);
	border-radius: 0.5rem;
	padding: 1.5rem;
	box-shadow: 0 0 0.0rem 0.1rem rgba(240, 240, 240, 1);
	backdrop-filter: blur(10px);
}

.Custom-tip{
	background-color: white;
	border-radius: 0.5rem;
	width: 12.5rem;
	padding: 0.5rem;
	box-shadow: 0 0 0.0rem 0.1rem rgba(240, 240, 240, 1);
	font-size: 0.7rem;
}

.G-header-border{
	border-bottom: 1px solid #BFBFBF;
}

.l-default{
	padding: 0.2rem 0.6rem;
	border-radius: 1rem;
	background-color:#BFBFBF;
	align-self: center;
	margin-left: auto;
}


.G-bg2{
	background-color: white;
	border-radius: 0.5rem;
	padding: 1.5rem;
}

.G-bg-nopadding{
	background-color: white;
	border-radius: 0.5rem;
	box-shadow: 0 0 0.0rem 0.1rem rgba(240, 240, 240, 1);
}


.shadow{
 box-shadow: 0 0 0.1rem 0.0rem rgba(240, 240, 240, 1);	
}

.G-box{
	border: 1px solid #eee;
	padding: 1rem;
}

.G-bg-width{
	width: 75%;
}

.G-gap{
	margin-bottom: 1.2rem;
}

.G-flex{
	display: flex;
}

.G-flex-start{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}


.G-flex-end{
	
	
	align-content: center;
	justify-content: flex-end;
}

.G-flex-wrapper{
	display: flex;
	align-items:flex-start ;
	justify-content: center;
} 
	

.G-flex-center{
	display: flex;
	align-items:center;
	justify-content: center;
} 

.G-flex-between{
	display: flex;
	align-items:center;
	justify-content: space-between;
} 

.G-flex-between{
	display: flex;
	align-items:center;
	justify-content: space-between;
} 

.G-flex-responsive{
	display: flex;
	align-items:center;
	justify-content: space-between;
} 


.res-width-large{
	width: 64%
}

.res-width-small{
	width: 34%
}

.res-width-medium{
	width: 45%
}


/*powpa container styles and container flex styles end*/




/*powpa input, select, element styles*/

.input-look{
	display: block;
	padding: 0.5rem;
	width: 100%;
	border-radius: 0.3rem;
	border: 1px solid rgba(223, 223, 223,1);
}

.input-look2{
	display: block;
	padding: 0.5rem;
	border-radius: 0.3rem;
	border: 1px solid rgba(223, 223, 223,1);
}

/*powpa input, select, element styles end*/






/*powpa green button style*/
.G-green-btn1{
	display: grid;
	place-items:center;
	cursor: pointer;
	border-style: none;
	padding: 0.5rem 0.8rem;
	border-radius: 0.3rem;
	background-color: #007944;
	color: white;

}
	
.G-green-btn2{
	border-style: none;
	padding: 0.5rem;
	border-radius: 0.3rem;
	background-color: #007944;
	color: white;
}
/*powpa green button style end*/



/*powpa green light style*/

.G-light-btn {
		border-style: none;
		padding: 0.5rem;
		border-radius: 0.3rem;
		border: 1px solid rgba(223, 223, 223, 1);
		background-color: white;
	}

.G-light-btn2 {
		border-style: none;
		padding: 0.2rem 0.5rem;
		border-radius: 0.3rem;
		border: 1px solid rgba(223, 223, 223, 1);
		background-color: white;
	}

.G-light-btnalt {
		border-style: none;
		padding: 0.5rem 0.8rem;
		border-radius: 0.3rem;
		border: 1px solid rgba(223, 223, 223, 1);
		background-color: white;
	}

.G-red-btn {
	
		display: grid;
		place-items:center;
		border-style: none;
		padding: 0.2rem 0.5rem;
		border-radius: 0.3rem;
		border: 1.5px solid #f35588;
		background-color: white;
	    color:#f35588;
		cursor: pointer;
	}

.G-red-btn2 {
/*
		display: grid;
		place-items:center;
*/
		border-style: none;
		padding: 0.2rem 0.5rem;
		border-radius: 0.3rem;
		background-color: #f35588;
	    color:white;
		cursor: pointer;
	}

.G-red-btnalt {
		display: grid;
		place-items:center;
		border-style: none;
		padding: 0.5rem 0.8rem;
		border-radius: 0.3rem;
		background-color: #f35588;
	    color:white;
		cursor: pointer;
	}


.G-light-btn3 {
		border-style: none;
		padding:0.5rem;
		border-radius: 0.3rem;
	}

/*powpa green light style end*/

.spanerror{
	color: #f35588;
	font-size: 0.5rem;
	padding-left: 1rem;
}

.G-td-style{
	padding: 0.5rem;
	background-color: white;
}



@media screen and (max-width:768px){
.G-bg-width{
	width: 100%;
}
	
.G-flex-responsive{
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content: space-between;
} 
	
	
.res-width-large, .res-width-small, .res-width-medium{
	width: 100%;
}



	
	
}


/*
.active{
	background-color: #007944!important;
	border-color: #007944!important;
}
*/