/*
I wanted to go with a mobile first approach, but it actually lead to more verbose CSS in this case, so I've gone web first. Can't always force things...
Side note: I know that this style of nesting in SASS doesn't result in the most performance efficient CSS code... but on the OCD/organizational side, I like it. So for CodePen purposes, CSS selector performance be damned.
*/
/* Global settings */
/* Global "table" column settings */
.product-image-title {
	float: left;
	width: 20%;
	color: #737373;
	font-size: 14px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
}
.product-image {
	float: left;
	width: 20%;
}
.product-details-title {
	float: left;
	width: 34%;
	color: #737373;
	font-size: 14px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
}
.product-details {
	float: left;
	width: 34%;
}
td.product-details {
	width: auto;
	border: 0;
}
.product-price-title {
	float: left;
	width: 15%;
	color: #737373;
	font-size: 14px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
}
.product-price {
	float: left;
	width: 15%;
	color: #333;
	font-size: 16px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
	margin: 40px 0px 0px 0px;
}
td .product-price {
	font-size: 15px;
	white-space: nowrap;
}
.product-quantity-title {
	float: left;
	width: 10%;
	color: #737373;
	font-size: 14px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
}
.product-quantity {
	float: left;
	width: 10%;
}
.product-removal-title {
	float: left;
	width: 9%;
	color: #737373;
	font-size: 14px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
}
.product-removal {
	float: left;
	width: 9%;
}
.product-line-price-title {
	float: left;
	width: 12%;
	text-align: right;
	color: #737373;
	font-size: 14px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
}
.product-line-price {
	float: left;
	width: 12%;
	text-align: right;
	color: #333;
	font-size: 16px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
	margin: 40px 0px 0px 0px;
}
/* This is used as the traditional .clearfix class */
.group:before,
.shopping-cart:before,
.column-labels:before,
.product:before,
.totals-item:before,
.group:after,
.shopping-cart:after,
.column-labels:after,
.product:after,
.totals-item:after {
	content: '';
	display: table;
}
.group:after,
.shopping-cart:after,
.column-labels:after,
.product:after,
.totals-item:after {
	clear: both;
}
.group,
.shopping-cart,
.column-labels,
.product,
.totals-item {
	zoom: 1;
}
/* Apply clearfix in a few places */
/* Apply dollar signs */
.product .product-price:after,
.product .product-line-price:after,
.totals-value:after {
	content: ' €';
}
/* Body/Header stuff */
/*body {
padding: 0px 30px 30px 20px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
} */
/*
h1 {
font-weight: 100;
}
label {
color: #aaa;
}*/
.shopping-cart {
	margin-top: 80px;
	margin-bottom: 70px;
}
/* Column headers */
.column-labels label {
	padding-bottom: 35px;
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
}
.column-labels .product-image-title,
.column-labels .product-removal-title {
	text-indent: -9999px;
}
/* Product entries */
.product {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}
.product .product-image {
	text-align: center;
}
.product .product-image img {
	width: 100px;
}
.product .product-details .product-title {
	margin-right: 20px;
	color: #333333;
	font-size: 15px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
}
.product .product-details .product-description,
.product .product-analysis {
	margin: 25px 20px 5px 0;
	color: #949494;
	font-size: 12px;
	font-family: 'Manrope', cursive;
	font-weight: 400;
	text-align: left;
}
.product .product-details .product-description span {
	margin: 25px 20px 5px 0px;
	color: #333333;
	font-size: 12px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
}
.product .product-quantity input {
	width: 60px;
	margin-top: 30px;
}
.product .product-analysis {
	clear: both;
	margin-left: 20%;
}
/* for chrome */
.product .product-quantity input[type='number']::-webkit-outer-spin-button,
.product .product-quantity input[type='number']::-webkit-inner-spin-button {
	/*-webkit-appearance: none;*/
	opacity: 1;
	margin: 0;
	color: #ff0000;
}
/* for firefox */
/*.product .product-quantity input[type=number] {
-moz-appearance:textfield;
}*/
.fa-trash {
	text-decoration: none;
	color: #9a9a9a;
	font-size: 20px;
}
.fa-trash:hover {
	text-decoration: none;
	color: #7c7c7c;
	font-size: 20px;
}
.remove-product {
	border: 0;
	background-color: transparent;
	border-radius: 0px;
	margin: 35px 0px 0px 0px;
	text-align: center;
}
.remove-product:hover {
	background-color: transparent;
}
/* Totals section */
.totals .totals-item {
	float: right;
	clear: both;
	width: 100%;
	margin-bottom: 10px;
}
.totals .totals-item label {
	float: left;
	clear: both;
	width: 79%;
	text-align: right;
	color: #333;
	font-size: 16px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
}
.totals .totals-item .totals-value {
	float: right;
	width: 21%;
	text-align: right;
	color: #333;
	font-size: 16px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
	white-space: nowrap;
}
.totals .totals-item-total {
	/*font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";*/
	color: #333;
	font-size: 16px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
}

.checkout {
	float: right;
	height: 48px;
	padding: 5px 30px;
	color: #fff;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	background-color: #636262;
	border-radius: 1px;
	border: 1px solid #636262;
	cursor: pointer;
	box-sizing: border-box;
}
.continueshop {
	float: left;
	border: 0;
	margin-top: 30px;
	/*padding:5px 30px 40px 30px;*/
	/*background-color: #6b6;*/
	color: #404040;
	font-size: 16px;
	border-radius: 0px;
	font-family: 'Manrope', cursive;
	font-weight: 700;
	text-decoration: none;
}
.continueshop:hover {
	background-color: none;
	color: #686868;
}
.continueshop span {
	color: #fd39ff;
	margin-right: 7px;
}
/* Make adjustments for tablet */
@media screen and (max-width: 812px) {
	.shopping-cart {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #eee;
	}
	.column-labels {
		display: none;
	}
	.product-image {
		float: right;
		width: auto;
	}
	.product-image img {
		margin: 0 0 10px 10px;
	}
	.product-details {
		float: none;
		margin-bottom: 10px;
		width: auto;
	}
	.product-price {
		clear: both;
		width: 70px;
	}
	.product-quantity {
		width: 100px;
	}
	.product-quantity input {
		margin-left: 20px;
		margin-top: 32px;
	}
	.product-quantity:before {
		content: 'x';
	}
	.product-removal {
		width: auto;
	}
	.product-line-price {
		float: right;
		width: 70px;
	}
}
/* Make more adjustments for phone */
@media screen and (max-width: 414px) {
	.product-removal {
		float: right;
	}
	.product-line-price {
		float: right;
		clear: left;
		width: auto;
		margin-top: 10px;
	}
	.product .product-line-price:before {
		content: 'Σύνολο : ';
	}
	.totals .totals-item label {
		width: 60%;
	}
	.totals .totals-item .totals-value {
		width: 40%;
	}
	.checkout {
		float: right;
		border: 0;
		margin-top: 20px;
		padding: 5px 30px 40px 30px;
		background-color: #6b6;
		color: #fff;
		font-size: 15px;
		border-radius: 0px;
		font-family: 'Manrope', cursive;
		font-weight: 700;
	}
	.checkout:hover {
		background-color: #494;
	}
	.shopping-cart {
		margin-top: 40px;
		margin-bottom: 30px;
	}
}