:root {
	--sls-auction-font-size: 14pt;
	--sls-auction-font-size-small: 12pt;
	--sls-auction-border: 1px solid rgba(0,0,0,0.1);
	--sls-auction-border-radius: 0.2em;
	--sls-auction-box-shadow: 0 0 2px rgba(0,0,0,0.1);

	--sls-auction-color-green: hsl(112,50%,85%);
	--sls-auction-color-red: hsl(0,50%,85%);
	--sls-auction-color-blue: #007cc3;
	--sls-auction-color-blue-light: #75c5f0;
	--sls-auction-color-dark: #333;
	--sls-auction-color-white: #fff;
	--sls-auction-color-yellow-light: #f7f4ab;

	--sls-auction-bgg-column: 3.3em;
	--sls-auction-price-column: 100px;
}

.auction_notice {
	width: 100%;
	background-color: var(--sls-auction-color-yellow-light);
	border: var(--sls-auction-border);
	border-radius: var(--sls-auction-border-radius);
	padding: 0.5em 0.7em;
}

/*
 *  Form
 *
 */

.auction_form {
	font-size: var(--sls-auction-font-size);
}

	.auction_form input {
		background-color: var(--sls-auction-color-white);
		border: var(--sls-auction-border);
		border-radius: var(--sls-auction-border-radius);
		padding: 0.3em 0.5em;
	}

		.auction_form input[type="submit"] {
			background-color: var(--sls-auction-color-blue);
			color: var(--sls-auction-color-white);
		}

	.auction_form table {
		width: 100%;
	}
		.auction_form tr {
			border: none;
		}
			.auction_form tbody tr:hover {
				background-color: rgba( 0, 0, 0, 0.1 );
			}
		.auction_form th {
			font-size: 80%;
			text-transform: uppercase;
			text-align: left;
			color: rgba( 0, 0, 0, 0.5 );
		}

/*
 *  Auction timeline
 *
 */

/* TODO: Bottom margin when no grid */

.auction_timeline {
	grid-template-columns: repeat( 4, 1fr );
	grid-template-areas: "listing open closed time";
	grid-column-gap: 1em;
	margin: 1em 0;
	font-size: var(--sls-auction-font-size);
}
@media screen and (min-width: 800px) {
	.auction_timeline {
		display: grid;
	}
	.auction_timeline div {
		margin-bottom: 0;
	}
}
	.auction_timeline.closing {
		grid-template-columns: repeat( 5, 1fr );
	}
	.auction_timeline div {
		flex: 1;
		margin-bottom: 1em;
		padding: 0.5em 1em;
		background-color: var(--sls-auction-color-white);
		border: var(--sls-auction-border);
		border-radius: var(--sls-auction-border-radius);
		box-shadow: var(--sls-auction-box-shadow);
	}
		.auction_timeline .time {
			grid-area: time;
			background-color: var(--sls-auction-color-dark);
			color: #fff;
		}
		.auction_timeline .listing { grid-area: listing; }
		.auction_timeline .open { grid-area: open; }
		.auction_timeline .closing { grid-area: closing; }
		.auction_timeline .closed { grid-area: closed; }

	.auction_timeline.planning { grid-template-areas: "time listing open closed"; }
	.auction_timeline.listing { grid-template-areas: "listing time open closed"; }
		.auction_timeline.listing .listing { background-color: var(--sls-auction-color-green); }
	.auction_timeline.open { grid-template-areas: "listing open time closed"; }
		.auction_timeline.open .open { background-color: var(--sls-auction-color-green); }
	.auction_timeline.closing { grid-template-areas: "listing open closed time closing"; }
	.auction_timeline.closing .closing { background-color: var(--sls-auction-color-red); }
		.auction_timeline.closed .closed { background-color: var(--sls-auction-color-red); }

/*
 *  Auction listing
 *
 */

#items {
	margin: 1em 0;
}

h3 .heading_actions {
	float: right;
	font-size: 80%;
}
	body.no-js h3 .heading_actions .expand { display: none; }

.auction-item > * {
	margin: 0 !important;
	border: var(--sls-auction-border);

/*	height: 2.8em; */
	line-height: 2.8em;
	padding: 0 0.75em;
}
	.auction-item .title {
		height: auto;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		line-height: 1.5em;
	}
	.auction-item p:last-child { margin-bottom: 0; }
	.auction-item .info {
		background-color: var(--sls-auction-color-white);
		height: auto;
		line-height: 1.4em;
		padding: 0.5em 0.75em;
	}
		.auction-item .info p {
			margin: 0;
		}
			.auction-item .info p + p {
				margin-top: 0.5em;
			}


/* Grid areas */
.auction-item .bgg { grid-area: bgg; }
.auction-item .info { grid-area: info; line-height: 1.4em; }
.auction-item .price { grid-area: price; }
.auction-item .star { grid-area: star; }
.auction-item .action { grid-area: action; }
.auction-item .title { grid-area: title; cursor: pointer; }

/* Item without action */
.auction-item {
	width: 100%;
	margin-bottom: 0.5em;
	display: grid;

	grid-template-columns: var(--sls-auction-bgg-column) auto;
	grid-template-areas:
		"title title"
		"bgg price"
		"action action"
		"info info";

	border-radius: var(--sls-auction-border-radius);
	box-shadow: var(--sls-auction-box-shadow);
	background-color: var(--sls-auction-color-white);
	font-size: var(--sls-auction-font-size-small);
}
	.auction-item.user-unlogged {
		grid-template-columns: var(--sls-auction-bgg-column) auto;
		grid-template-areas:
			"title title"
			"bgg price"
			"info info";
	}
	.auction-item.teaser {
		grid-template-columns: auto 96px;
		grid-template-areas: "title action";
	}
		.auction-item.teaser .action,
		.auction-item.teaser .bgg { grid-area: action; text-align: right; }
		.auction-item.teaser .action a {
			font-size: 80%;
			font-weight: 500;
			text-transform: uppercase;
		}
		body.js .auction-item.teaser .title::before {
			display: none;
		}

	@media screen and (min-width: 480px) {
		.auction-item {
			grid-template-columns: auto var(--sls-auction-bgg-column) var(--sls-auction-price-column);
			grid-template-areas:
				"title bgg price"
				"action action action"
				"info info info";
		}
		.auction-item.user-unlogged {
			grid-template-columns: auto var(--sls-auction-bgg-column) var(--sls-auction-price-column);
			grid-template-areas:
				"title bgg price"
				"info info info";
		}
	}

	@media screen and (min-width:800px) {
		.auction-item {
			grid-template-columns: auto var(--sls-auction-bgg-column) max-content var(--sls-auction-price-column);
			grid-template-areas:
				"title bgg action price"
				"info info info info";
		}
		.auction-item.item-closed {
			grid-template-columns: auto var(--sls-auction-bgg-column) var(--sls-auction-price-column);
			grid-template-areas:
				"title bgg price"
				"info info info";
		}
	}

	/* BGG Link */
	.auction-item .bgg {
		padding: 0;
	}
		.auction-item .bgg a {
			display: block;
			padding: 0 0.75em;
			border-bottom: none;
		}
			.auction-item .bgg a span {
				font-size: 80%;
				font-weight: 500;
			}

	/* Starred items */
	.auction-item .star {
		width: 40px;
		background: transparent url(images/star_no.png) 50% 50% no-repeat;
		background-size: 26px auto;
		transition: 200ms all;
	}
		.auction-item .star:hover {
			background-image: url(images/star_maybe.png);
			background-color: rgba(0,0,0,0.05);
		}
		.auction-item.starred .star {
			background-color: rgba(255,246,211,1);
			color: rgba(255,200,0,1);
		}

	/* Action */
	@media screen and (min-width: 800px) {
		.auction-item .action {
			text-align: right;
		}
	}

	/* ...  */

	.auction-item .title { font-weight: 500; }
		body.js .auction-item .title:before { content: "+"; display: inline-block; width: 0.5em; margin-right: 0.5em; font-weight: normal; font-size: 140%; color: rgba( 0, 0, 0, 0.25 ); }
			body.js .auction-item.expanded .title:before { content: "–"; }
		.auction-item.user-seller.bid .price,
		.auction-item.user-seller.bid .title,
		.auction-item.winning .price,
		.auction-item.winning .title { background-color: var(--sls-auction-color-green); }
		.auction-item.losing .price,
		.auction-item.losing .title { background-color: var(--sls-auction-color-red); }
	.auction-item .price { font-weight: 500; text-align: right; }
		.auction-item.nobid .price { color: rgba( 0, 0, 0, 0.4 ); }
	.auction-item .info { font-size: 90%; }
		body.js .auction-item .info { display: none; background-color: var(--sls-auction-color-white); }
		.auction-item .info input { width: 100%; }
		body.js .auction-item.expanded .info { display: block; }

/*	.auction-item div { line-height: 1.4em; } */
	.auction-item strong { font-size: 80%; text-transform: uppercase; color: rgba( 0, 0, 0, 0.5 ); }

	body.js form.auction-closed .user-unrelated .items {
		/* After auction has ended, hide items unrelated to the user by default */
		display: none;
	}


/*
 *  Form
 *
 */

.submit {
	text-align: right;
}
	.submit .small_print {
		font-size: 90%;
		margin-right: 0.5em;
	}
	.submit .button {
		padding: 0.3em 1.5em;
		border-radius: var(--sls-auction-border-radius);

		margin-top: 0.5em;
		min-width: 120px;
	}

.list_item_inputs {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0.5em;
}

.list_item_inputs input {
	flex: 1;
	margin-right: 0.5em;
}
.list_item_inputs input:last-child {
	margin-right: 0;
}

@media screen and (max-width: 1000px) {
	div.list_item_inputs {
		margin-bottom: 0;
	}
	.list_item_inputs input {
		min-width: 45%;
		margin-bottom: 0.5em;
	}
	.list_item_inputs input:nth-child(even) {
		margin-right: 0;
	}
}

form td {
	vertical-align: top;
}
form tr input {
	width: calc(100% - 1.3em);
	margin: 0.3em 0;
	padding: 0.5em;
}

/*
 *  User summary
 *
 */

.user-summary {
	font-size: 90%;
}
	.user-summary section {
		background-color: var(--sls-auction-color-white);
		box-shadow: 0 0 2px rgba(0,0,0,0.2);
		padding: 1em;
		margin-bottom: 1em;
	}
	.user-summary .name {
		font-size: 115%;
	}

	.user-summary div.user-info {
		margin-bottom: 0.5em;
		flex: 3;
	}
	.user-summary div.seller,
	.user-summary div.winner,
	.user-summary div.sum {
		flex: 2;
		margin-left: 2em;
		line-height: 1.6em;
	}
	.user-summary div.sum {
		flex: 1;
		max-width: 50px;
	}
	.user-summary .subtitle {
		font-size: 85%;
		text-transform: uppercase;
		font-weight: 500;
		color: #888;
	}

@media screen and (min-width:1024px) {
	.user-summary section {
		display: flex;
	}
	.user-summary div.sum {
		text-align: right;
	}
}

/*
 *  Blocked
 *
 */

.blocked {
	padding-left: 1em;
	border-left: 0.4em solid rgba(210,90,90,1);
}