#flowerShopIndex {width:500px;height:333px;}
#donutShopIndex {width:500px;height:333px;}	
#hardwareShopIndex {width:500px;height:333px;}	

.carousel-item {
	height: auto;
	width: 100%;
	
}

.sidenav { 
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
}


.imageProductList {
	height: 35px;
	width: 50px;
}


.imageProductList2 {
	height: 165px;
	width: 195px;
	border:0;
}

.imageProductWrapper {
	height: 180px;
	width: 200px;
}


.mainCenterContent {
	margin-top:4rem;
	
}

td.selectDeleteTd{
	width: 0.1%;
}

td.additionalInstructionTD {
	width: 0.1%;
	
}

td.bookingNumberTd{
	width: 2%;
}


td.barcodeTd{
	width: 2%;
}

td.barcodeTdAddBulk{
	width: 9%;
}

td.productCodeTdAddBulk{
	width: 6%;
}


td.productNameTd{
	
	width: 14%;
}


.prodNameInput{
	
	width: 100%;
}

.prodNameInputEdit{
	width: 100%;
}

table {
	overflow-x: auto;
}


td.quantityTd {
	width: 2%;
}

td.quantityTdInAddBulk {
	width: 8%;
}

td.sellPriceTdInAddBulk {
	width: 8%;
}

td.basePriceTdInAddBulk {
	width: 8%;
}

td.brandTdInAddBulk {
	width: 8%;
}

td.categoryTdInAddBulk {
	width: 8%;
}

td.classificationTdInAddBulk {
	width: 1%;
}

td.selectImageTdInAddBulk {
	width: 12%;
}

.qtyRowClass{
	width: 100% ;
}

td.unitPriceTd{
	width: 5% ;
}

.unitPrRowClass{
	width: 100% ;
}

td.discountTd{
	width: 2%;
}

.discountRowClass {
	width: 100%;
}

td.totalTd{
	width: 5%;
}

.totalRowClass{
	width: 100% ;
}

.qtyRowEditClass{
	width: 100% ;
	
}


.discountRowEditClass{
	width: 80%;
}

.discountRowEditClassPurchaseOrder{
	width: 80%;
}

.discountWholeInvoice {
		/*width:100%*/
}

.megaTotalClass {
	/*width:100%;
	display:block;*/
}


input.discountTotalClass {
	width: 10%;
}


.td-report-id {
	width: 5%;
	text-align: Center;
}

.td-report-dateTime {
	width: 15%;
	text-align: Center;
}

.td-report-name {
	width: 15%;
	text-align: Center;
}

.td-report-megaTotal {
	width: 15%;
	text-align: Center;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

.column-65{
  float: left;
  width: 60%;
  padding: 0px;
}

.column-sm-1{
  float: left;
  width: 8.33%;
  padding: 0px;
}

.column-sm-2{
  float: left;
  width: 16.67%;
  padding: 0px;
}

.column-sm-3{
  float: left;
  width: 25%;
  padding: 0px;
}

.column-sm-logo{
  float: left;
  width: 78px;
  padding: 0px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

.companyLabel {
	font-size :15px;
}


#greetingMsg {
	margin-right: 3em;
}

#secondContent {
	display: ;
}

#createTransactionContent {
	display: ;
}

#addEachTransactionContent {
	display: ;
}

.prodNameRowSmallScreen{
		display: none;
	}



.test {
    border-bottom: 4px double #333;
    border-top: 4px double #999;
    padding: 10px 0;
}

.alignRight {
	text-align : right;
}

.alignCenter {
	text-align : center;
}

.mt4rem{
	margin-top:4rem;
}

.mt5rem{
	margin-top:5rem;
}

.mt8rem{
	margin-top:8rem;
}

.subscriptionTable {
    border-collapse: separate;
    border-spacing:0 20px;
}

.roundedLogo {
	width:100px;
	height:100px;
}

.roundedLogoCompanyDetails{
	width:175px;
	height:175px;
}

.roundedLogoCompanyDetailsOnlineShop {
	width:125px;
	height:125px;
}

.fixTableHead { 
  overflow-y: auto; 
  height: 110px; 
} 

.fixTableHead thead th { 
  position: sticky; 
  top: 0; 
  color: white;
} 

table { 
  border-collapse: collapse;         
  width: ; 
} 
th, 
td { 
  padding: ; 
  border: ; 
} 
th { 
  background: #0d6efd; 
} 

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 3rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 0rem;
  }
}

#mySidebar {
	margin-top:4rem;
	display:none;
	overflow-y: auto;
	    
}

.accountingSidebar{
	overflow-y: auto;
	max-height: 300px;
}

.view1 {
	display: block;
}

.view2 {
	display: none;
}


.smallWarningMessage {
	font-size: 8px;
	color: red;
}



@media only screen and (max-width: 1738px) {
	.mainCenterContent  {
		margin-top:6rem;
	}
	
	#mySidebar {
		margin-top:6rem;
		display:none;
		overflow-y: auto;
			
	}
	
	#purchaseOrderWithBarcodeShortcutButton {
		margin-top:5px;
	}
	
	#productAndServiceShortcutButton {
		margin-top:5px;
	}
	
	#kitchenViewShortcutButton {
		margin-top:5px;
	}
}


@media only screen and (max-width: 1280px) {
	.mySidebar {
		width:45%;display:none;
	}
	
	#openNav {
		display:block-inline;
	}

	#main {
		margin-left:0%; 
	}
	
	#productAndServiceShortcutButton {
		margin-top:5px;
	}
	
	#kitchenViewShortcutButton {
		margin-top:5px;
	}
	
	#purchaseOrderShortcutButton {
		margin-top:5px;
	}
	
	#addInBulkShortcutButton {
		margin-top:5px;
	}
	
	.marginTop5px {
		margin-top:5px;
	}
	
	.imageProductWrapper {
		height: 100px;
		width: 120px;
		margin-top: 35px;
	}
	
	.imageProductList2 {
		height: 90px;
		width: 115px;
		border:0;
	}
	
	.mainCenterContent { 
		margin-top:6rem;
		margin-left:0%; 
	}
	
	.mt4rem {
		margin-top:6rem;
	}
	
	.mb6rem {
		margin-bottom:6rem;
	}
	
	html, body {
		font-size: 12px;
		height: 100vh; /* Ensure the body takes the full viewport height */
	}
	
	h1{
		font-size :18px;
	}
	
	label{
		font-size :10px;
	}
	
	.productNameInput {
		width: 100%;
	}
	
	
	td.totalTd{
		width:20%;
	}

	.totalRowClass{
		width:100% ;
	}
	
	
	.prodNameRowSmallScreen{
		display: inline;
	}
	
	.roundedLogo{
		width: 50px;
		height: 50px;
	}
	
	th, td {
		word-wrap: break-word;
	  }
	  
	/* Force table to not be like tables anymore */
	table.addItemTable, thead.addItemTable, tbody.addItemTable, th.addItemTable, td.addItemTable, tr.addItemTable { 
		display: block; 
		width:100%;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead.addItemTable tr.addItemTable { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr.addItemTable{ border: 1px solid #ccc; }
	
	td.addItemTable { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td.addItemTable:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td.addItemTable:nth-of-type(1):before { content: "***New Item Selected***"; }
	/*td.addItemTable:nth-of-type(2):before { content: "Barcode"; }*/
	td.addItemTable:nth-of-type(2):before { content: "Product Name"; }
	td.addItemTable:nth-of-type(3):before { content: "Additional Instruction"; }
	td.addItemTable:nth-of-type(4):before { content: "Qty"; }
	td.addItemTable:nth-of-type(5):before { content: "Unit Price"; }
	td.addItemTable:nth-of-type(6):before { content: "Discount"; }
	td.addItemTable:nth-of-type(7):before { content: "Sub Total"; }
	
	
	
	

	
}




@media only screen and (max-width: 1750px) {

	/* For Add Product In Bulk
	   Force table to not be like tables anymore */
	table.addItemTable2, thead.addItemTable2, tbody.addItemTable2, th.addItemTable2, td.addItemTable2, tr.addItemTable2 { 
		display: block; 
		width:100%;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead.addItemTable2 tr.addItemTable2 { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr.addItemTable2{ border: 1px solid #ccc; }
	
	td.addItemTable2 { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td.addItemTable2:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td.addItemTable2:nth-of-type(1):before { content: "***New Row***"; }
	td.addItemTable2:nth-of-type(2):before { content: "Barcode"; }
	td.addItemTable2:nth-of-type(3):before { content: "Product Code"; }
	td.addItemTable2:nth-of-type(4):before { content: "Product Name"; }
	td.addItemTable2:nth-of-type(5):before { content: "Product Description"; }
	td.addItemTable2:nth-of-type(6):before { content: "Quantity"; }
	td.addItemTable2:nth-of-type(7):before { content: "Sell Price"; }
	td.addItemTable2:nth-of-type(8):before { content: "Base Price"; }
	td.addItemTable2:nth-of-type(9):before { content: "Brand"; }
	td.addItemTable2:nth-of-type(10):before { content: "Category"; }
	td.addItemTable2:nth-of-type(11):before { content: "Classification"; }
	td.addItemTable2:nth-of-type(12):before { content: "Image"; }
	
	
	/* For Add Product With Barcode
	   Force table to not be like tables anymore */
	table.addItemTable3, thead.addItemTable3, tbody.addItemTable3, th.addItemTable3, td.addItemTable3, tr.addItemTable3 { 
		display: block; 
		width:100%;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead.addItemTable3 tr.addItemTable3 { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr.addItemTable3{ border: 1px solid #ccc; }
	
	td.addItemTable3 { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td.addItemTable3:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td.addItemTable3:nth-of-type(1):before { content: "Barcode"; }
	td.addItemTable3:nth-of-type(2):before { content: "Product Code"; }
	td.addItemTable3:nth-of-type(3):before { content: "Product Name"; }
	td.addItemTable3:nth-of-type(4):before { content: "Product Description"; }
	td.addItemTable3:nth-of-type(5):before { content: "Quantity"; }
	td.addItemTable3:nth-of-type(6):before { content: "Sell Price"; }
	td.addItemTable3:nth-of-type(7):before { content: "Base Price"; }
	td.addItemTable3:nth-of-type(8):before { content: "Brand"; }
	td.addItemTable3:nth-of-type(9):before { content: "Category"; }
	td.addItemTable3:nth-of-type(10):before { content: "Classification"; }
	td.addItemTable3:nth-of-type(11):before { content: "Image"; }


	
	
}





@media only screen and (max-height: 770px) {
	.w3-btn, .w3-button{
		padding: 4px 16px;
	}		
	
	.w3-bar-block, .w3-bar-item {
		padding :0px 0px;
	}
	
	.mySidebar {
		font-size : 10px;
		width:11%;
	}
	
	#addInBulkShortcutButton {
		margin-top: 3px;
		
	}
	
	#navigationSidebarLabel {
		font-size : 15px;
	}
	
}

@media only screen and (max-width: 991px) {
	.mainCenterContent  {
		margin-top:4rem;
	}
	
	.mySidebar {
		margin-top:4rem;
		width:45%;
	}
	
	#mySidebar {
		margin-top:4rem;
		width:45%;
	}
	
	#flowerShopIndex {width:325px;height:200px;}
	#donutShopIndex {width:325px;height:200px;}	
	#hardwareShopIndex {width:325px;height:200px;}		
	
}


/* For iPad air 2*/
@media only screen and (max-width: 826px) {
	.mySidebar {
		width:45%;
	}
	
	#flowerShopIndex {width:325px;height:200px;}
	#donutShopIndex {width:325px;height:200px;}	
	#hardwareShopIndex {width:325px;height:200px;}		
	
	
	
}


@media only screen and (max-width: 538px) {
	
	.mySidebar {
		width:45%;
	}
		
}

@media only screen and (max-width: 360px) {
	#flowerShopIndex {width:350px;height:183px;}
	#donutShopIndex {width:350px;height:183px;}	
	#hardwareShopIndex {width:350px;height:183px;}		
	
		
}