.pi_table {
	width:100%;
	border-left:#e2e2e2 solid 1px;
	border-right:#e2e2e2 solid 1px;
	border-bottom:#e2e2e2 solid 1px;
	font-size:14px;
}



.pi_table .tr {
	border-top:#e2e2e2 solid 1px; 
	position:relative;
}

.pi_table .tr.header {
/* 	display:none; */
	border-top:0;
	background-color:#f0f0f0;
}



.pi_table .tr.header .td {
	font-size:11px;
	text-transform: uppercase;
	vertical-align: middle;
	color:#666666;
	letter-spacing:1px;
	border-top:#e2e2e2 solid 1px;
	border-bottom:#e2e2e2 solid 1px;
}

.pi_table.pi_shaded .tr:not(.header):nth-child(even) {
		background-color:#f9f9f9;
	}


.pi_table .td {
	padding:10px;
}

.pi_table .td em {
	color:#000000;
	font-style: normal;
}

.pi_table .td .colLabel {
	display:block;
	font-size:11px;
	text-transform: uppercase;
	letter-spacing:1px;
	color:#aaaaaa;
}

.pi_table .td p:last-child,
.pi_table .td ul:last-child {
	margin-bottom:0;
}





/* connect next table to one before */
.pi_table.pi_connect {
	margin-top:-1px;
}








/* special side by side table with 2 columns */
/* example: transaction table */
.pi_table.pi_sideBySide .tr .td:first-child {
	font-size:11px;
	text-transform: uppercase;
	letter-spacing:1px;
	color:#aaaaaa;
	padding-bottom:0;
}

.pi_table.pi_sideBySide .tr .td:last-child  {
	padding-top:0;
}




/* no transformation for smaller screens */
/* header presists */

.pi_table.pi_noTransform,
.pi_table.pi_mobile {
	display:table;
	table-layout: fixed;
}

.pi_table.pi_noTransform .tr.header,
.pi_table.pi_noTransform .tr,
.pi_table.pi_mobile .tr{
	display:table-row;
}


.pi_table.pi_noTransform .td,
.pi_table.pi_mobile .td {
	border-top:#e2e2e2 solid 1px;
	display:table-cell;
}


.pi_table.pi_noTransform .td {
	padding:10px;
}

.pi_table.pi_noTransform .td .colLabel {
	display:none;	
}

.pi_table.pi_noTransform .alignRight {
	text-align: right;
}

.pi_table.pi_noTransform .alignCenter {
	text-align: center;
}


/* padded Left , padded Right if there are static inputs on the left or right */
.pi_table.pi_staticLeft .tr {
	padding-left:60px;
}

.pi_table.pi_staticRight .tr {
	padding-right:60px;
}

.pi_table.pi_staticLeft .tr .td:first-child {
	display:block;
	width:60px;
	position:absolute;
	top:0;
	left:0px;
}

.pi_table.pi_staticRight .tr .td:last-child {
	display:block;
	width:60px;
	position:absolute;
	top:0;
	right:0px;
	text-align:right;
}


/* hide desk size content on mobile */
.pi_table .pi_desk {
	display:none;
}



.pi_table.pi_noTransform .width5  { width: 5%; }
.pi_table.pi_noTransform .width10 { width: 10%; }
.pi_table.pi_noTransform .width15 { width: 15%; }
.pi_table.pi_noTransform .width20 { width: 20%; }
.pi_table.pi_noTransform .width25 { width: 25%; }
.pi_table.pi_noTransform .width30 { width: 30%; }
.pi_table.pi_noTransform .width33 { width: 33.33%; }
.pi_table.pi_noTransform .width35 { width: 35%; }
.pi_table.pi_noTransform .width40 { width: 40%; }
.pi_table.pi_noTransform .width45 { width: 45%; }
.pi_table.pi_noTransform .width50 { width: 50%; }
.pi_table.pi_noTransform .width55 { width: 55%; }
.pi_table.pi_noTransform .width60 { width: 60%; }
.pi_table.pi_noTransform .width65 { width: 65%; }
.pi_table.pi_noTransform .width66 { width: 66.66%; }
.pi_table.pi_noTransform .width70 { width: 70%; }
.pi_table.pi_noTransform .width75 { width: 75%; }
.pi_table.pi_noTransform .width80 { width: 80%; }
.pi_table.pi_noTransform .width85 { width: 85%; }
.pi_table.pi_noTransform .width90 { width: 90%; }
.pi_table.pi_noTransform .width95 { width: 95%; }


/* ------------------------------------- BREAKPOINT ---------------------------------- */
@media screen and (min-width:600px) {
	.pi_table.pi_small {
		display:table;
		table-layout: fixed;
	}
	
	

	.pi_table.pi_small .tr,
	.pi_table.pi_small .tr.header {
		display:table-row;
		position:inherit;
	}



	.pi_table.pi_small .td {
		border-top:#e2e2e2 solid 1px;
		display:table-cell;
	}

	.pi_table.pi_small .td .colLabel {
		display:none;
	}


	/* align right */
	.pi_table.pi_small .td.alignRight {
		text-align:right;
	}

	.pi_table.pi_small .td.alignCenter {
		text-align:center;
	}



	/* special side by side table with 2 columns */
	/* example: transaction table */
	.pi_table.pi_small.pi_sideBySide .tr .td:first-child {
		font-size:inherit;
		text-transform: inherit;
		letter-spacing:inherit;
		color:inherit;
		padding-bottom:10px;
	}

	.pi_table.pi_small.pi_sideBySide .tr .td:last-child  {
		padding-top:10px;
	}



	
		


	/* paddedLeft , paddedRight if there are static inputs on the left or right */
	.pi_table.pi_small.pi_staticLeft .tr,
	.pi_table.pi_small.pi_staticRight .tr{
		padding:0;
	}

	.pi_table.pi_small.pi_staticLeft .tr .td:first-child,
	.pi_table.pi_small.pi_staticRight .tr .td:last-child{
		display:table-cell;
		width:auto;
		position:inherit;
		margin-left:0;
	}
	
	
	/* hide mobile only */
	.pi_table.pi_small.pi_mobile,
	.pi_table.pi_small .pi_mobile {
		display:none !important;
	}

	
	/* show desk size content */
	.pi_table.pi_small .pi_desk {
		display:table-cell;
	}


	.pi_table.pi_small .width5  { width: 5%; }
	.pi_table.pi_small .width10 { width: 10%; }
	.pi_table.pi_small .width15 { width: 15%; }
	.pi_table.pi_small .width20 { width: 20%; }
	.pi_table.pi_small .width25 { width: 25%; }
	.pi_table.pi_small .width30 { width: 30%; }
	.pi_table.pi_small .width33 { width: 33.33%; }
	.pi_table.pi_small .width35 { width: 35%; }
	.pi_table.pi_small .width40 { width: 40%; }
	.pi_table.pi_small .width45 { width: 45%; }
	.pi_table.pi_small .width50 { width: 50%; }
	.pi_table.pi_small .width55 { width: 55%; }
	.pi_table.pi_small .width60 { width: 60%; }
	.pi_table.pi_small .width65 { width: 65%; }
	.pi_table.pi_small .width66 { width: 66.66%; }
	.pi_table.pi_small .width70 { width: 70%; }
	.pi_table.pi_small .width75 { width: 75%; }
	.pi_table.pi_small .width80 { width: 80%; }
	.pi_table.pi_small .width85 { width: 85%; }
	.pi_table.pi_small .width90 { width: 90%; }
	.pi_table.pi_small .width95 { width: 95%; }






}

		
		
/* ------------------------------------- BREAKPOINT ---------------------------------- */
@media screen and (min-width:800px) {
	.pi_table.pi_medium {
		display:table;
		table-layout: fixed;
	}

	.pi_table.pi_medium .tr,
	.pi_table.pi_medium .tr.header {
		display:table-row;
		position:inherit;
	}



	.pi_table.pi_medium .td {
		border-top:#e2e2e2 solid 1px;
		display:table-cell;
	}

	.pi_table.pi_medium .td .colLabel {
		display:none;
	}

	.pi_table.pi_medium .td.alignRight {
		text-align:right;
	}

	.pi_table.pi_medium .td.alignCenter {
		text-align:center;
	}


	/* special side by side table with 2 columns */
	/* example: transaction table */
	.pi_table.pi_medium.pi_sideBySide .tr .td:first-child {
		font-size:inherit;
		text-transform: inherit;
		letter-spacing:inherit;
		color:inherit;
		padding-bottom:10px;
	}

	.pi_table.pi_medium.pi_sideBySide .tr .td:last-child  {
		padding-top:10px;
	}


	


	/* paddedLeft , paddedRight if there are static inputs on the left or right */
	.pi_table.pi_medium.pi_staticLeft .tr,
	.pi_table.pi_medium.pi_staticRight .tr{
		padding:0;
	}

	.pi_table.pi_medium.pi_staticLeft .tr .td:first-child,
	.pi_table.pi_medium.pi_staticRight .tr .td:last-child{
		display:table-cell;
		width:auto;
		position:inherit;
		margin-left:0;
	}

	/* hide mobile only */
	.pi_table.pi_medium.pi_mobile,
	.pi_table.pi_medium .pi_mobile {
		display:none !important;
	}
	
	/* show desk size content */
	.pi_table.pi_medium .pi_desk {
		display:table-cell;
	}


	.pi_table.pi_medium .width5  { width: 5%; }
	.pi_table.pi_medium .width10 { width: 10%; }
	.pi_table.pi_medium .width15 { width: 15%; }
	.pi_table.pi_medium .width20 { width: 20%; }
	.pi_table.pi_medium .width25 { width: 25%; }
	.pi_table.pi_medium .width30 { width: 30%; }
	.pi_table.pi_medium .width33 { width: 33.33%; }
	.pi_table.pi_medium .width35 { width: 35%; }
	.pi_table.pi_medium .width40 { width: 40%; }
	.pi_table.pi_medium .width45 { width: 45%; }
	.pi_table.pi_medium .width50 { width: 50%; }
	.pi_table.pi_medium .width55 { width: 55%; }
	.pi_table.pi_medium .width60 { width: 60%; }
	.pi_table.pi_medium .width65 { width: 65%; }
	.pi_table.pi_medium .width66 { width: 66.66%; }
	.pi_table.pi_medium .width70 { width: 70%; }
	.pi_table.pi_medium .width75 { width: 75%; }
	.pi_table.pi_medium .width80 { width: 80%; }
	.pi_table.pi_medium .width85 { width: 85%; }
	.pi_table.pi_medium .width90 { width: 90%; }
	.pi_table.pi_medium .width95 { width: 95%; }

}

		
		
		
		

/* ------------------------------------- BREAKPOINT ---------------------------------- */
@media screen and (min-width:1000px) {
	.pi_table {
		display:table;
		table-layout: fixed;
	}



	.pi_table .tr,
	.pi_table .tr.header {
		display:table-row;
		position:inherit;
		border:0;
		width:100%;
	}


	.pi_table .tr.colspan {
		display:table;
	}



	.pi_table .td {
		border-top:#e2e2e2 solid 1px;
		display:table-cell;
	}

	.pi_table .td .colLabel {
		display:none;
	}

	.pi_table .td.alignRight {
		text-align:right;
	}

	.pi_table .td.alignCenter {
		text-align:center;
	}

	.pi_table .colspan {
		display:block;
		position:relative;
	}

	/* special side by side table with 2 columns */
	/* example: transaction table */
	.pi_table.pi_sideBySide .tr .td:first-child {
		font-size:inherit;
		text-transform: inherit;
		letter-spacing:inherit;
		color:inherit;
		padding-bottom:10px;
	}

	.pi_table.pi_sideBySide .tr .td:last-child  {
		padding-top:10px;
	}



	/* hide mobile only */
	.pi_table.pi_mobile,
	.pi_table .pi_mobile {
		display:none;
	}



	/* paddedLeft , paddedRight if there are static inputs on the left or right */
	.pi_table.pi_staticLeft .tr,
	.pi_table.pi_staticRight .tr{
		padding:0;
	}

	.pi_table.pi_staticLeft .tr .td:first-child,
	.pi_table.pi_staticRight .tr .td:last-child{
		display:table-cell;
		position:inherit;
		margin-left:0;
	}


	/* show desk size content */
	.pi_table .td.pi_desk {
		display:table-cell;
	}






	.pi_table .width5  { width: 5%; }
	.pi_table .width10 { width: 10%; }
	.pi_table .width15 { width: 15%; }
	.pi_table .width20 { width: 20%; }
	.pi_table .width25 { width: 25%; }
	.pi_table .width30 { width: 30%; }
	.pi_table .width33 { width: 33.33%; }
	.pi_table .width35 { width: 35%; }
	.pi_table .width40 { width: 40%; }
	.pi_table .width45 { width: 45%; }
	.pi_table .width50 { width: 50%; }
	.pi_table .width55 { width: 55%; }
	.pi_table .width60 { width: 60%; }
	.pi_table .width65 { width: 65%; }
	.pi_table .width66 { width: 66.66%; }
	.pi_table .width70 { width: 70%; }
	.pi_table .width75 { width: 75%; }
	.pi_table .width80 { width: 80%; }
	.pi_table .width85 { width: 85%; }
	.pi_table .width90 { width: 90%; }
	.pi_table .width95 { width: 95%; }


}








/********************************************************/
/* --------------- SPECIFIC USE CASES ----------------- */
/********************************************************/
	
/* table for footer subtotals, tax, total ..etc */
.pi_table + .pi_tableFooter {
	background-color:#f0f0f0;
}


.pi_table + .pi_tableFooter b {
	color:#000000;
}



/* ------- ORDERS TABLE FOR STORE, ORDER REVIEW -------- */


/* item name option details */
.pi_orders .pi_option_dscr {
	font-weight:bold;
	color:#000000;
}

.pi_orders .pi_option_details ul {
	margin: 0 0 5px 15px;
	padding: 0;
	list-style: square;
}

.pi_orders .pi_option_ref {
	font-size:11px;
	margin-bottom:10px;
}


/* pricing */
.pi_orders .pi_unit_price {
	white-space: nowrap;
}

.pi_orders .pi_option_details + .pi_unit_price {
	margin-top:20px;
}

/* price adjustments */
.pi_orders .pi_unit_price_adjust {
	font-size:11px;
	white-space: nowrap;
	
}

.pi_orders .pi_unit_price_adjust > div {
	display:inline-block;
}



/* ORDERS, REVIEW ORDERS */

.pi_orders .qty {
	display:inline-block;
	width:15%;
	text-align:center;
	vertical-align: top;
}

.pi_orders .price, 
.pi_orders .amount {
	display:inline-block;
	width:42.5%;
	vertical-align: top;
}

.pi_orders .amount {
	text-align:right;
}


.pi_orders + .pi_tableFooter .label { width:66.66%; text-align:right;}
.pi_orders + .pi_tableFooter .value { width:33.33%; text-align:right;}





/* padding to align text with qty input for orders */
.pi_orders.pi_alignQty .tr.header .qty {
	text-align:right;
	padding-right:17px;
}

.pi_orders.pi_alignQty .tr:not(.header) .item,
.pi_orders.pi_alignQty .tr:not(.header) .price {
	padding:17px 10px;
}



/* bare list purchasing options */
.pi_bareList,
.pi_bareList .td,
.pi_bareList .tr {
	border:0;
}

.pi_bareList .td .colLabel {
	display:block !important;
}


/* ------------------------------------- BREAKPOINT ---------------------------------- */
@media screen and (min-width:600px) {
	
	/*  ORDERS, REVIEW ORDERS */
	.pi_orders .qty, 
	.pi_orders .price, 
	.pi_orders .amount {
		width:auto;
		display:table-cell;
	}
	
	.pi_orders .price {
		text-align:right;
	}
	




	.pi_orders + .pi_tableFooter .label { width:77%; }
	.pi_orders + .pi_tableFooter .value { width:23%; }

}