@media all and (min-width: 35em) {	/* 45em */
	.breakpoint-login {
		width: 70%;
		margin: auto;
	}

	.breakpoint-reset, .breakpoint-userInfo {
		width: 60%;
		margin: auto;
	}

	.breakpoint-userInfo, .breakpoint-vehicleInfo {
		width: 90%;
		margin: auto;
	}

	.breakpoint-userInfo {	width: 80%;		margin: auto; 	}
	
	.general-List tbody td.invest-center{	
		text-align: center !important;
		vertical-align: middle;
	}
	.general-List tbody td.invest-right{		text-align:right !important;	}
	.general-List tbody td a.ui-btn {			margin:0 !important;	}
	/*.Investment-list tbody td span.show-mobile-only{	display: none !important;	}	*/
	.general-List tbody td span a.ui-btn {		display: none !important;	}
	
	fieldset.ui-checkbox {	padding-top:7px;	}
	
	.ui-table tbody td.hide-on-mobile a.ui-btn{	
		/* Commented to display full Button Disc Icon In TD */
		/* display: inline !important;	 */
	}
	
	
	/* wrap on wide viewports once open */
	.ui-panel-page-content-open.ui-panel-page-content-position-left {	margin-right: 17em;	}
	.ui-panel-page-content-open.ui-panel-page-content-position-right {	margin-left: 17em;	}
	.ui-panel-page-content-open {	width: auto;	}

	/* disable "dismiss" on wide viewports */
	/*	.ui-panel-dismiss {	display: none;	}	*/
	
	.breakpoint-timbangan-search .ui-block-a{	text-align:right	}
	
	.breakpoint-timbangan div.ui-select /*	div.ui-field-contain>label~[class*=ui-]	*/  {
	}
	
	.breakpoint-timbangan div.ui-input-search {		}
	
	.hide-on-desktop{	display: none !important;	}
	
	.docPicture{
		max-width: 65%
	}
	
	table.general-List{
		margin: 1em 0 1em 0;
	}
	
	.general-List tbody td a.ui-btn-icon-status{
		margin-inline-start: auto !important;
		margin-inline-end: auto !important;
	}
}

.docPicture{
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	object-fit: cover;
}

a.ui-btn.ui-shadow.ui-corner-all.ui-btn-icon-notext.ui-btn-icon-status.ui-icon-check {
	 background-color: lightgreen;	/* green; */
}
a.ui-btn.ui-shadow.ui-corner-all.ui-btn-icon-notext.ui-btn-icon-status.ui-icon-delete {
	background-color: red;
}

/* .menu, .menu2 { */
	/* position: absolute; */
	/* background-color: #fff; */
	/* border: 1px solid #000; */
	/* left: 20px; */
	/* width: 100px; */
	/* height: 100px; */
	/* padding: 10px; */
	/* display: inline-grid; */
/* } */

@media all and (max-width: 35em) {		/* For mobile view - Fahmi */
	.breakpoint-layout1 .ui-block-a,
	.breakpoint-layout1 .ui-block-b,
	.breakpoint-layout1 .ui-block-c,
	.breakpoint-layout1 .ui-block-d,
	.breakpoint-layout1 .ui-block-e {
		width: 100%;
		float:none;
	}
	
	/*	.breakpoint-timbangan-search	*/
	.breakpoint-timbangan-search .ui-block-a,
	.breakpoint-timbangan-search .ui-block-b,
	.breakpoint-timbangan-search .ui-block-c,
	.breakpoint-timbangan-search .ui-block-d,
	.breakpoint-timbangan-search .ui-block-e {
		width: 100%;
		float:none;
	}

	/* Remove ui-body padding if using mobile - Fahmi */
	.ui-body {
		padding: 0 0 0 0 !important;
	}

	/* Remove listview margin(top & bottom) if using mobile - Fahmi */
	.ui-content .ui-listview-inset{
		margin: 0.5em 0;
	}
	
	.general-List tbody th,
	.general-List tbody td {
		background-color: #eeeeee; /* non-RGBA fallback  */
		background-color: rgba(0,0,0,0.05);
	}
	.general-List tbody td.hide-on-mobile{	display: none !important;	}
	.general-List tbody td span a.ui-btn {	float:right;	margin:0 !important;	}
	
	.hide-on-mobile{	display: none !important;	}
	
	.docPicture{
		max-width: 100%
	}
	
	table.general-List{
		border-collapse: separate; 
		border-spacing: 0 1em;
	}
	
	/* table.general-List>tr	{ */
		/* border:solid black 1px; */
		/* border-radius:6px; */
	/* } */
	
	/* https://stackoverflow.com/questions/4932181/rounded-table-corners-css-only */
	/* th:first-of-type { */
	  /* border-top-left-radius: 10px; */
	/* } */
	/* th:last-of-type { */
	  /* border-top-right-radius: 10px; */
	/* } */
	/* tr:last-of-type td:first-of-type { */
	  /* border-bottom-left-radius: 10px; */
	/* } */
	/* tr:last-of-type td:last-of-type { */
	  /* border-bottom-right-radius: 10px; */
	/* } */
}

/* Collapsible list items Style Sheet - Fahmi */
.ui-li-static.ui-collapsible > .ui-collapsible-heading {    margin: 0;	}
.ui-li-static.ui-collapsible {	padding: 0;		}
.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {	border-top-width: 0;	}
.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content {	border-bottom-width: 0;	}

.avatar_img {	border-radius: 15%;		}

/* .ui-page-theme-a .checkbox-background  {	background-color:#FFFFFF !important;	}	*/
/*	.ui-page-theme-d .ui-btn {	background-color:#FFFFFF !important;	}	
/*	.ui-checkbox .ui-btn {	background-color:#FFFFFF !important;	}	*/
label.ui-btn.ui-corner-all.ui-btn-inherit.ui-btn-active.ui-checkbox-on {	background-color:#F44336 !important; border-color:#F44336 !important;	}

.general-List thead th,
.general-List tbody tr:last-child {
	border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.general-List tbody th,
.general-List tbody td {
	border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
	border-bottom: 1px solid rgba(0,0,0,0.05);
	/*	background-color: rgba(0,0,0,.03);	*/
}
.general-List tbody tr:last-child th,
.general-List tbody tr:last-child td {
	border-bottom: 0;
}
.general-List tbody tr:nth-child(odd) td,
.general-List tbody tr:nth-child(odd) th {
	background-color: #eeeeee; /* non-RGBA fallback  */
	background-color: rgba(0,0,0,.05);
}

/* Notes
Hex : RGB
#1d1d1d : 29, 29, 29 to #E57373 : 228, 173, 43 - header bar background - b-bar-background-color
#1b1b1b : 27, 27, 27 to #E2AB29 : 226, 171, 41 - page border - b-bar-border
#333333 : 51, 51, 51 to #F44336 : 250, 195, 65 - button up background - b-bup-background-color
#1f1f1f : 31, 31, 31 to #E6AF2D : 230, 175, 45 - button up border - b-bup-border
#373737 : 55, 55, 55 to #FEC745 : 254, 199, 69 - button hover background - 
#DDDDDD : 221, 221, 221 to 
#e9e9e9 : 233, 233, 233 to 177, 122, 247
*/

.fileinput-button {
	position: relative;
	overflow: hidden;
	float: left;
	margin-right: 4px;
}
.fileinput-button input {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	opacity: 0;
	filter: alpha(opacity=0);
	transform: translate(-300px, 0) scale(4);
	font-size: 23px;
	direction: ltr;
	cursor: pointer;
}

/* E
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-e {
border: 1px solid 		#f7c942 /*{e-bar-border}*/;
background: 			#fadb4e /*{e-bar-background-color}*/;
color: 					#333 /*{e-bar-color}*/;
font-weight: bold;
text-shadow: 0 /*{e-bar-shadow-x}*/ 1px /*{e-bar-shadow-y}*/ 0 /*{e-bar-shadow-radius}*/ 	#fff /*{e-bar-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #fceda7 /*{e-bar-background-start}*/), to( #fbef7e /*{e-bar-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* FF3.6 */
background-image:     -ms-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* IE10 */
background-image:      -o-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* Opera 11.10+ */
background-image:         linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/);
}
.ui-bar-e,
.ui-bar-e input,
.ui-bar-e select,
.ui-bar-e textarea,
.ui-bar-e button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-bar-e .ui-link-inherit {
color: 	#333 /*{e-bar-color}*/;
}
.ui-bar-e a.ui-link {
color: #2489ce /*{e-bar-link-color}*/;
font-weight: bold;
}
.ui-bar-e a.ui-link:visited {
color: #2489ce /*{e-bar-link-visited}*/;
}
.ui-bar-e a.ui-link:hover {
color: #2489ce /*{e-bar-link-hover}*/;
}
.ui-bar-e a.ui-link:active {
color: #2489ce /*{e-bar-link-active}*/;
}
.ui-body-e,
.ui-overlay-e {
border: 1px solid 		#f7c942 /*{e-body-border}*/;
color: 					#222 /*{e-body-color}*/;
text-shadow: 0 /*{e-body-shadow-x}*/ 1px /*{e-body-shadow-y}*/ 0 /*{e-body-shadow-radius}*/ 	#fff /*{e-body-shadow-color}*/;
background: 			#fff9df /*{e-body-background-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #fffadf /*{e-body-background-start}*/), to( #fff3a5 /*{e-body-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* FF3.6 */
background-image:     -ms-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* IE10 */
background-image:      -o-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* Opera 11.10+ */
background-image:         linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/);
}
.ui-overlay-e {
background-image: none;
border-width: 0;
}
.ui-body-e,
.ui-body-e input,
.ui-body-e select,
.ui-body-e textarea,
.ui-body-e button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-body-e .ui-link-inherit {
color: 	#222 /*{e-body-color}*/;
}
.ui-body-e .ui-link {
color: #2489ce /*{e-body-link-color}*/;
font-weight: bold;
}
.ui-body-e .ui-link:visited {
color: #2489ce /*{e-body-link-visited}*/;
}
.ui-body-e .ui-link:hover {
color: #2489ce /*{e-body-link-hover}*/;
}
.ui-body-e .ui-link:active {
color: #2489ce /*{e-body-link-active}*/;
}
.ui-btn-up-e {
border: 1px solid 		#f4c63f /*{e-bup-border}*/;
background: 			#fadb4e /*{e-bup-background-color}*/;
font-weight: bold;
color: 					#222 /*{e-bup-color}*/;
text-shadow: 0 /*{e-bup-shadow-x}*/ 1px /*{e-bup-shadow-y}*/ 0 /*{e-bup-shadow-radius}*/ 	#fff /*{e-bup-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #ffefaa /*{e-bup-background-start}*/), to( #ffe155 /*{e-bup-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* FF3.6 */
background-image:     -ms-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* IE10 */
background-image:      -o-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* Opera 11.10+ */
background-image:         linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/);
}
.ui-btn-up-e:visited,
.ui-btn-up-e a.ui-link-inherit {
color: 					#222 /*{e-bup-color}*/;
}
.ui-btn-hover-e {
border: 1px solid 		#f2c43d /*{e-bhover-border}*/;
background: 			#fbe26f /*{e-bhover-background-color}*/;
font-weight: bold;
color: 					#111 /*{e-bhover-color}*/;
text-shadow: 0 /*{e-bhover-shadow-x}*/ 1px /*{e-bhover-shadow-y}*/ 0 /*{e-bhover-shadow-radius}*/ 	#fff /*{e-bhover-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #fff5ba /*{e-bhover-background-start}*/), to( #fbdd52 /*{e-bhover-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* FF3.6 */
background-image:     -ms-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* IE10 */
background-image:      -o-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* Opera 11.10+ */
background-image:         linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/);
}
.ui-btn-hover-e:visited,
.ui-btn-hover-e:hover,
.ui-btn-hover-e a.ui-link-inherit {
color: 					#333 /*{e-bhover-color}*/;
}
.ui-btn-down-e {
border: 1px solid 		#f2c43d /*{e-bdown-border}*/;
background: 			#fceda7 /*{e-bdown-background-color}*/;
font-weight: bold;
color: 					#111 /*{e-bdown-color}*/;
text-shadow: 0 /*{e-bdown-shadow-x}*/ 1px /*{e-bdown-shadow-y}*/ 0 /*{e-bdown-shadow-radius}*/ 	#fff /*{e-bdown-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #f8d94c /*{e-bdown-background-start}*/), to( #fadb4e /*{e-bdown-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* FF3.6 */
background-image:     -ms-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* IE10 */
background-image:      -o-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* Opera 11.10+ */
background-image:         linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/);
}
.ui-btn-down-e:visited,
.ui-btn-down-e:hover,
.ui-btn-down-e a.ui-link-inherit {
	color: 	#333 /*{e-bdown-color}*/;
}
.ui-btn-up-e,
.ui-btn-hover-e,
.ui-btn-down-e {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
text-decoration: none;
}

/* Setting Up Icons For Dashboard */
.IconSets {
	width: 100%;
	padding: 0;
	margin:0;
}
.clsIcon {
	float:left;
	text-align: center;
	padding-bottom: 15px;
	height: 7em;
}
.clsIconLink {
	text-decoration: none;
	color:#111111;
	text-shadow: 0 1px 1px #fff;
	display: inline-block;
    width: inherit;
	cursor: pointer;		/* Need to be added manually on 2023-04-16 to ocver dynamic button*/
}
div.MenuIcon {
	background-repeat: no-repeat; 
	height:60px;
	width:60px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
div.eNotaTimbangan {
	background-image:url('../icons/inventory.png');
}
div.eNotaHantaran {
	background-image:url('../icons/delivery-box.png');
}
div.eJualanLangsung {
	background-image:url('../icons/cashsale.png');
}
div.eInternalStockTransfer {
	background-image:url('../icons/stockTransfer.png');
}
div.eStockCount {
	background-image:url('../icons/calculator.png');
}
div.eBookBasket {
	background-image:url('../icons/cart.png');
}
div.ePemandu {
	background-image:url('../icons/driver.png');
}
div.BasketChart {
	background-image:url('../icons/basket_performance.png');
}
div.BasketStatus {
	background-image:url('../icons/basket-circle-green-icon.png');
}
div.PurchaseStatus {
	background-image:url('../icons/sale_po_icon.png');
}
div.SaleStatus {
	background-image:url('../icons/sale-60px.png');
}
div.BasketMap {
	background-image:url('../icons/location-map.png');
}
div.Users {
	background-image:url('../icons/user-icon-white.png');
}
div.OperationCentre {
	background-image:url('../icons/operations-center.png');
}
div.RetailCentre {
	background-image:url('../icons/retail-store.png');
}
div.FarmCentre {
	background-image:url('../icons/farm-centre.png');
}
div.eStockTransit {
	background-image:url('../icons/stockTransit.png');
}
div.Statistik {
	background-image:url('../icons/statistic.png');
}
div.Setting {
	background-image:url('../icons/setting.png');
}
div.eBasketCollect {
	background-image:url('../icons/basketCollect.png');
}
div.BasketTransaction {
	background-image:url('../icons/BasketTransaction.png');
}
div.AgroProduct {
	background-image:url('../icons/agriculture-crops-icon.png');
}


@media (max-width: 400px) {		div.clsIcon {	width:50%;	}	}
@media (min-width: 401px) {		div.clsIcon {	width:25%;	}	}
/* End Setting Up Icons For Dashboard */

@media (max-width: 400px) {
  h4#TxtFooter.ui-title:before {
    content: 'eBakul';
  }
}

@media (min-width: 401px) {
  h4#TxtFooter.ui-title:before {
    content: 'Sistem Pengurusan Bakul';
  }
}

/* Spacing Between ListView - Fahmi */
.ui-listview>.ui-li-static {
    padding: .3em 1em;
}

span.ui-li-count.ui-body-inherit {
	background-color:#8CC63F ;
	border-color:#FFFFFF;
	cursor: pointer;
}

span.ui-li-count.ui-body-inherit:hover	{
	background-color: #36f443 ;
}

.ui-icon-print:after {
	background-image:url('../icons/printer.svg');
	/* Make your icon fit */
	background-size: 18px 18px;
}
.ui-icon-map:after {
	background-image:url('../icons/map.svg');
	/* Make your icon fit */
	background-size: 18px 18px;
}

/* img#PurchaseDocumentImage{ */
.docPicture{
	display:inline-block;
	position:relative;
	border:1px solid #005AAB;	/* border:1px solid #ccc; */
	padding:1.5px;
	background:#8CC63F;			/* background:#f2f2f2; */
	margin-bottom:30px;
}

/* #map-page, #map-canvas, #map-canvas2 {  */
	/* width: 100%;  */
	/* height: 89%;  */
	/* padding: 0; */
/* } */

div.map-page {
	width: 100%; 
	height: 89%; 
	padding: 0;
	position: fixed !important;
}

.basket-status-labels {
	color: #005AAB;
	/* color: #ea4335; */
	background-color: #FFFFFF;
	/* font-family: Roboto, Arial, sans-serif; */
	/* font-size: 15px; */
	/* text-align: center; */
	/* width: 20px; */
	white-space: nowrap;
	/* margin: 15px; */
	font-size: 13px;
	font-weight: bold;
	transform: translateX(-50%);
}

.footer-button-left,
.footer-button-right {
	position: absolute;
	margin: 0;
	top: auto;
	bottom: 0.24em;
}
.footer-button-left {
	left: 0.4em;
}
.footer-button-right {
	right: 0.4em;
}

.ui-listview>li p {
	white-space: pre-wrap;
}

/* Setting Up eNotaHantaran Menu */
div.DO-MenuIconWrapper {
	width: 100%;
	float:left;
	text-align: center;
	/* padding-bottom: 15px; */
	height: 8em;
	margin-top: 15px;
}
div.DO-MenuIconLink {
	text-decoration: none;
	color:#111111;
	text-shadow: 0 1px 1px #fff;
	display: inline-block;
    width: inherit;
	cursor: pointer;		/* Need to be added manually on 2023-04-16 to ocver dynamic button*/
}
div.DO-MenuIcon {
	display: inline-block;
	background-repeat: no-repeat; 
	height:60px;
	width:60px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
div.UmbrellaStall {
	background-image:url('../icons/umbrella-stall-60px.png');
}
div.ui-block-1, div.ui-block-2, div.ui-block-3 {
	display: inline-block;
	width: 33.33%;
}

fieldset.MenuDO{
	/* border:1px solid black; */
	/* display:inline-block; */
	position:relative;
	border:2px solid #005AAB;	/* border:1px solid #ccc; */
	padding:15px;
	background: #FFFFFF;		/* background:#8CC63F;			/* background:#f2f2f2; */
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	object-fit: cover;
	cursor: pointer;
	/* margin-bottom:30px; */
	/* height: 75%; */
	/* vertical-align: middle; */
}
.MenuDO .ui-block-a,
.MenuDO .ui-block-b,
.MenuDO .ui-block-c {
	width: 33.33%;
	/* float: none; */
}
div.RightArrowButton {
	background-image:url('../icons/arrow-icon.png');
	/* background-image:url('../icons/icon-arrow-60px.png'); */
}

/* html, body { */
	/* Disables pull-to-refresh but allows overscroll glow effects in iOs. */
    /* width: 100%; */
    /* height: 100%; */
    /* position: fixed; */
    /* overflow: hidden; */
	
	/* touch-action:none; */
/* } */

/* html { */
  /* overflow: hidden; */
/* } */