/* =========================================
DECKLISTS PAGE
========================================= */

.decklists-page {
background: #000;
color: #fff;


width: min(1200px, 94%);
margin: 0 auto;

padding: 40px 50px 80px;

box-sizing: border-box;


}

/* =========================================
INTRODUCTION
========================================= */

.decklists-intro {
width: 100%;
box-sizing: border-box;


padding: 10px 20px 30px;

text-align: center;


}

.decklists-intro h1 {
margin-top: 0;
margin-bottom: 20px;
}

.decklists-intro p {
max-width: 850px;
margin: 10px auto;


line-height: 1.6;


}

/* =========================================
DECKLISTS MODULE
========================================= */

.decklists-module {
background: #111;


border: 1px solid #333;
border-radius: 6px;

padding: 10px;

box-sizing: border-box;


}

.decklists-module h2 {
margin-top: 0;
margin-bottom: 15px;


text-align: center;


}

/* =========================================
TABLE CONTAINER
========================================= */

.decklists-container {
width: 100%;


overflow-x: auto;


}

/* =========================================
TABLE
========================================= */

.decklists-table {
width: 100%;


border-collapse: collapse;

text-align: center;


}

.decklists-table th,
.decklists-table td {
padding: 8px;


border-bottom: 1px solid #333;


}

.decklists-table th {
font-weight: 600;
white-space: nowrap;
}

/* =========================================
COMMANDER COLUMNS
========================================= */

.decklists-table th:first-child,
.decklists-table td:first-child {
text-align: left;
}

.decklists-table th:nth-child(2),
.decklists-table td:nth-child(2) {
text-align: left;
}

/* =========================================
LIST LINK
========================================= */

.decklists-table a {
color: #eee;


text-decoration: underline;


}

.decklists-table a:hover {
color: #fff;
}

/* =========================================
COLOR SYMBOLS
========================================= */

.deck-color-symbol {
width: 30px;
height: 30px;


object-fit: contain;


}

.deck-color-symbol.inactive {
opacity: 0.2;
}

/* =========================================
MOBILE
========================================= */

@media (max-width: 768px) {


	.decklists-page {
		width: 100%;

		padding: 25px 15px 60px;
	}

	.decklists-intro {
		padding: 10px 20px 30px;
	}

	.decklists-intro h1 {
		font-size: 30px;
	}

	.decklists-table {
		min-width: 850px;
	}

}

/* =========================================
SORTABLE HEADERS
========================================= */

.sortable-header {
	cursor: pointer;
	user-select: none;
	transition: background 0.15s;
}

.sortable-header:hover {
	background: #222;
}

.sort-indicator {
	font-size: 11px;
	margin-left: 3px;
	display: inline-block;
	width: 12px;
}