@charset "utf-8";
/* Responsive Tables - Desktop layout styles */
/* from https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css/ */
/* Original: http://codepen.io/anon/pen/QwPVNW */
/* Revised version: http://codepen.io/jurebajt/pen/oXYMxJ */

.responsive_table table {
	border: 1px solid #ccc;
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 0.9em;	/* change font size for the entire table */
}
.responsive_table table tr {
	border: 1px solid #ddd;
	padding: 5px;
}
.responsive_table table th, .responsive_table table td {
	padding: 5px;	/* change padding for the desktop table */
	text-align: center;
}
.responsive_table table th {	/* format the table headings for desktop only */
/* font-size:1.3em; */ 
}

/* TG customisations */
/* responsive table customisations for desktop */
.responsive_table .align_pricing {	/* used to align table headings and fields  */
	text-align: right;
}
.responsive_table .align_qty {	/* used to align table headings and fields  */
	text-align: center;
}
.responsive_table .align_text {	/* used to align table headings and fields  */
	text-align: left;
}
.responsive_table .newline {	/* we use this to make a line break to split a heading into 2 rows */
	margin: 0px;
	padding: 0px;
}
.responsive_table .discount {
	color:#b01c2e;	/* Swe-Check Red */
	font-size:0.9em;
}
.responsive_table .backorder {
	color:#b01c2e;	/* Swe-Check Red */
	font-size:0.9em;
}


/* Responsive Tables - Mobile layout styles  */

@media screen and (max-width: 980px) {
.responsive_table table {
	border: 0;
}
.responsive_table table thead {
	display: none;
}
.responsive_table table tr {
	margin-bottom: 10px;	/*control spacing between each table group in mobile */
	display: block;
	padding: 0px;
	font-weight:normal;	/* make all content bold, then remove bold from label in a later style */
}
.responsive_table table tr:after {
	content: "";
	display: table;
	clear: both;
}
.responsive_table table tr:before {
	display: block;
	border-bottom: 2px solid #ddd;
}
.responsive_table table td {
	box-sizing: border-box;
	display: block;
	float: left;
	clear: left;
	width: 100%;
	text-align: left;
	border-bottom: 1px dotted #ccc;
	padding: 5px 3px 5px 5px;	/* change padding in the field and value row */
}
.responsive_table table td:last-child {	/* formatting for the last line of each table row */
	border-bottom: 0;
}
.responsive_table table td:before {	/* style the table label in mobile view only */
	content: attr(data-label) ":";	/* add a colon after table label ie. Product Code: */
	float: left;
	padding-right: 8px; /*added to create space between label and field value */
	color: #999; /* color of the label */
	font-weight: normal;	/* remove bold from label */
}

/* TG customisations */
/* responsive table customisations for mobile */
.responsive_table .align_pricing, .responsive_table .align_qty, .responsive_table .align_text {		
	text-align: left;
	color: #000; /*color of the field value when these styles applied */
}
.responsive_table .product_code {
	background-color:#eee;
}
.responsive_table .discount {
	color:#b01c2e;	/* Swe-Check Red */
	font-weight:normal;
}
.responsive_table .backorder {
	color:#b01c2e;	/* Swe-Check Red */
}

/* End of the mobile media query */
}