* {
	margin:0;
	padding:0;
}
::selection {
    background:transparent;
}
body {
	background-color:#a21623;
    background-image:url('../../circolo/cir_background.png');
    background-repeat:repeat;
    background-position:center 120px, center top;
	color:#fcfcfc;
	font-size:20px;
	font-family:Arial, Helvetica, sans-serif;
	white-space:nowrap;
	user-select:none;
}
noscript {
	text-align:center;
	color:red;
	margin:0 10px;
}
a {
	text-decoration:none;
}
.float_right {
	float:right;
}
.float_left {
	float:left;
}
.txt_small {
		font-size:0.7em;
}
.clear {
	clear:both;
}

@media (min-width:1024px) { /* Desktop */
	.header {
		font-size:1.5em;
		height:85px;
	}
	.grid-50-25-25 {
		display:grid;
		grid-template-columns:40% 35% 25%;
	}
	.grid-75-25 {
		padding-top:120px;
		display:grid;
		grid-template-columns:75% 25%;
		
	}
	.total {
		font-size:2em;
		line-height:1em;
		color:#ffffff;
	}
	.content .buttons {
		width:200px;
		height:60px;
		margin:0 0 10px 10px;
	}
	.content .buttons .produktname {
		font-size:1.9em;
	}
	.content .buttons .produktpreis {
		font-size:1.6em;
	}
	.content .buttons .margin-left-45 {
		margin-left:45px;
	}
	.content .buttons:hover {
		background:white;
		border:1px #cccccc inset;
	}
	.content .buttons:active {
		background:black;
		color:white;
		transition:all 0.1s ease-in;
	}
	.content .buttons:focus {
		border:1px black dashed;
	}
	.product_price_personal { /* wenn Button Personal */
		font-size:0.8em;
		color:#ffffff;
	}
}

@media (min-width:668px) and (max-width:1023px) {  /* Tablet */
	.header {
		font-size:1.1em;
		height:65px;
	}
	.grid-50-25-25 {
		display:grid;
		grid-template-columns:40% 35% 25%;
	}
	.grid-75-25 {
		padding-top:100px;
		display:grid;
		grid-template-columns:75% 25%;
	}
	.total {
		font-size:2em;
		line-height:1em;
		color:#ffffff;
	}
	.content .buttons {
		width:99px;
		overflow:hidden;
		height:40px;
		margin:0 0 5px 5px;
	}
	.content .buttons .produktname {
		font-size:1.1em;
	}
	.content .buttons .produktpreis {
		font-size:0.9em;
	}
	.content .buttons .pfand {
		font-size:0.8em;
	}
	.content .buttons:active {
		background:black;
		color:white;
		transition:all 0.1s ease-in;
	}
	.content .buttons:hover {
		border:1px black dashed;
	}
	#delete_total:active {
		background-color:#00ff00;
		border:1px #cccccc inset;
	}
	.cart #products-list {
		font-size:0.8em;
	}
	.product_price_personal { /* wenn Button Personal */
		font-size:0.8em;
		color:#ffffff;
	}
}

@media (max-width:667px) {  /* Handy Portrait */
	.header {
		font-size:1.1em;
		height:175px;
	}
	.total {
		font-size:1.6em;
		line-height:1em;
		color:#ffffff;
	}
	#delete_total {
		margin-top:10px;
	}
	.grid-50-25-25 {
	}
	.grid-75-25 {
		padding-top:210px;
		
	}
	.content .buttons {
		width:170px;
		height:60px;
		margin:0 0 10px 10px;
	}
	.content .buttons .produktname {
		font-size:1.7em;
	}
	.content .buttons .produktpreis {
		font-size:1.3em;
	}
	.content .buttons .pfand {
		font-size:1em;
	}
	.content .buttons:active {
		background:black;
		color:white;
	}
	.content .buttons:hover {
		border:1px black dashed;
	}
	#delete_total:active {
		background-color:#00ff00;
		border:1px #cccccc inset;
	}
	.product_price_personal { /* wenn Button Personal */
		font-size:0.6em;
		color:#ffffff;
	}
}


/* Login Form */
.login_form {
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-175px;
	margin-top:-200px;
	width:350px;
	height:350px;
	padding:40px 0;
	background:#dddddd;
	text-align:center;
	color:black;
	font-size:2em;
	line-height:0.9em;
}
.login_form input, 
.login_form input {
	width:250px;
	font-size:1em;
	padding:5px;
	margin:20px 0;
	text-align:center;
}
.login_form input[type=submit] {
	background:#b4e391;
	background:linear-gradient(to bottom,  #b4e391 0%,#61c419 50%,#b4e391 100%);
	border:1px #333333 solid;
	text-align:center;
	cursor:pointer;
}


/* Header (Prices) */
.header {
	position:fixed;
	width:100%;
	background-color:#101010;
	padding:10px;
	border-bottom:1px #666 solid;
	box-shadow:0 0 3px #000;
}

/* Produkt */
.product {
	cursor:pointer;
}
#product_name {
	color:#cccccc;
}
.product_name_del { /* wenn Produkt gelöscht */
	text-decoration:line-through;
}
.product_price {
	color:#cccccc;
}
.product_price_del { /* wenn Produkt gelöscht */
	color:#cccccc;
	text-decoration:line-through;
}
.product_price:after,
.product_price_del:after,
#deposit_sum:after {
	content:' €';
}

/* Total */
#delete_total {
	width:80px;
	height:40px;
	margin:15px;
	background-color:#00ff00;
	background-image:url('del-cart.png');
	border:1px #cccccc outset;
	border-radius:4px;
	cursor:pointer;
}
#button-remove {
	width:80px;
	height:40px;
	margin:15px;
	background-color:#00ff00;
	background-image:url('del-product.png');
	border:1px #cccccc outset;
	border-radius:4px;
	cursor:pointer;
}
#delete_total:hover,
#button-remove:hover {
	border:1px #cccccc inset;
}
.total:after,
.total_personal:after {
	content:' €';
}
.deposit {
	color: #999999;
	font-size:0.7em;
}
.deposit #deposit:after {
	content:' €';
}


/* Content (Buttons) */
.content {
}
.content .buttons {
	float:left;
	color:#000000;
	border:1px #cccccc outset;
	text-align:center;
	padding:4px 0;
	cursor:pointer;
	border-radius:4px;
}
.content .button_aperol {
	background: #fd642c;
	background: linear-gradient(to bottom,  #fd642c 0%,#be4113 100%);
}
.content .button_aperol_remove {
	background:#fcac8e;
}
.content .button_blue {
	background: #7abcff;
	background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
}
.content .button_blue_remove {
	background:#badbfd;
}
.content .button_green {
	background: #d2ff52;
	background: linear-gradient(to bottom,  #d2ff52 0%,#91e842 100%);
}
.content .button_green_remove {
	background:#e6fea1;
}
.content .button_pink {
	background: #ff7abe;
	background: linear-gradient(to bottom,  #ff7abe 0%,#ed3b97 100%);
}
.content .button_pink_remove {
	background:#fba6d2;
}
.content .button_orange {
	background: #ff7400;
	background: linear-gradient(to bottom,  #ff7400 0%,#c95b00 100%);
}
.content .button_orange_remove {
	background:#fdb273;
}
.content .button_yellow {
	background: #fcf088;
	background: linear-gradient(to bottom,  #fcf088 0%,#f1da36 100%);
}
.content .button_yellow_remove {
	background:#fcf6c0;
}
.content .button_brown {
	background: #fea575;
	background: linear-gradient(to bottom,  #fea575 0%,#c17f5b 100%);
}
.content .button_brown_remove {
	background:#fcf6c0;
}
.content .button_tuerkis {
	background: #00fff6;
	background: linear-gradient(to bottom,  #00fff6 0%,#03aaa4 100%);
}
.content .button_tuerkis_remove {
	background:#bdfdfb;
}
.content .button_personal {
	background: #ff3600;
	background: linear-gradient(to bottom,  #ff3600 0%,#db3103 100%);
}
.content .button_personal_remove {
	background:#fdcfc2;
}
.content .button_personal_disabled {
	background: #cccccc;
}


.content .buttons .produktname {
	font-weight:bold;
}
.content .buttons .produktpreis {
	font-weight:bold;
}
.content .buttons .pfand {
	font-weight:normal;
	color:rgba(0,0,0,0.6);
}

/* cart */
.cart {
	max-width:215px;
	min-height:215px;
	padding:10px;
	margin:0 10px;
	background-color:rgba(50,50,50,0.9);
	background-image:url('screw.png'), url('screw.png'), url('screw.png'), url('screw.png');
	background-position:left top, right top, left bottom, right bottom;
	background-repeat:no-repeat;
	font-size:0.9em;
	border:1px #000 solid;
	border-radius:5px;
	box-shadow:2px 2px 5px #000;
}
.cart .headline {
	display:block;
	color:gray;
	font-weight:bold;
	font-size:1em;
	text-align:center;
 	text-shadow: 
     1px  1px 1px black,
     1px -1px 1px black,
    -1px  1px 1px black,
    -1px -1px 1px black;
}
.cart #products-list {
	margin:15px 0;
	display:block;
}
.cart .info {
	color:gray;
	font-size:0.8em;
	text-align:center;
	white-space:normal;
}

#select-remove-div {
	display:none;
}



/* logout */
.logout {
	color:gray;
	width:215px;
	min-height:30px;
	margin:10px;
	padding:10px;
	background-color:rgba(50,50,50,0.9);
	border:1px #000 solid;
	border-radius:5px;
	box-shadow:1px 1px 2px #000;
	text-align:center;
}
.logout a {
	color:red;
	font-size:0.9em;
}