/* This file only to be used in storage/extlist.php as it overrides style.css */
/* Table background & positioning */
table {
	border: 1px solid #696;
	margin: 20px auto 10px auto;
	display: block;
	border-collapse: collapse;
	width: auto;
	overflow-x: visible;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10pt;
	text-align: center;
}

/* Background for table header cells */
thead {
	background-color: #363;
}

/* Background for table content cells */
tbody {
	border: 0px;
	background-color: #121;
	cursor: default;
}

/* Table header cells */
th {
	border-top: 1px solid #696;
	padding: 2px 4px;
	font-weight: 900;
	white-space: nowrap;
}

/* Text-align these columns to left:
	Extension Name, Author, Description, Notes to left
	Doesn't support IE lower than 8 but who cares about IE
	Note: this is 1-based column number, so column id + 1... i.e. nth-child(4) is td for col3
*/
td:nth-child(2), td:nth-child(3), td:nth-child(5), td:nth-child(20) {
	text-align: left;
}

/* Column width, th tags only */
.col0 { min-width: 40px; }
.col1, .col2, .col19 { min-width: 200px; text-align: left; }

.col3, .col6, .col13, .col17 { min-width: 75px; }
.col4, .col19 { width: auto; text-align: left; min-width: 30vw; }
.col5, .col8, .col9, .col10, .col11, .col14, .col18 { min-width: 100px; }
.col7, .col15 { min-width: 110px; }
.col12 { min-width: 125px; }
.col16 { min-width: 180px; }

/* Unavailable download links */
td:nth-child(12), td:nth-child(13) {
	font-size: 16px;
	color: #6A9;
}
td:first-child {
	background: #FFF;
	border-right: 1px solid #696;
}
/* Extension icons: valid and invalid */
td:first-child:first-child .extIconValid {
	width: 24px;
	height: 24px;
	margin: 0 auto;
}
img.extIconInvalid {
	max-width: 32px;
	max-height: 32px;
	width: auto;
	height: 100%;
}

.ex {
	font-size: 12px;
	color: #3A9;
	text-decoration: none;
}

.ex:hover {
	color: #3CA;
	text-decoration: underline;
}
/* Download links */
.dl {
	font-size: 16px;
	color: #3A9;
	text-decoration: none;
}

.dl:hover {
	color: #3CA;
	text-decoration: underline;
}

/* Table content cells */
td {
	border-top: 1px solid #696;
	padding: 2px 4px;
	height: 12px;
}
/* Advanced container for Darkwire header */
#container_noborder {
	line-height: 1.0;
	margin: 10px auto;
}

div#filter {
	border: 2px solid #F00;
	position: fixed;
	bottom: 0px;
	left: 10px;
	background-color: #121;
	padding-bottom: 3px;
}
/* Add a bit more margin to filter when showing */
div#filter.filterOpen {
	margin-right: 0.5vw;
}
div.filterFields {
	/* Hide by default, overriden in JS later */
	display: none;
	margin: auto 5px;
	text-align: left;
	min-width: fit-content;
}
input.filterTopButton {
	float: left;
	height: 21px;
	margin-top: 2px;
	margin-left: 5px;
	display: none; /* Hide by default, overriden in CSS later */
}

input#filterExpandButton {
	display: inline-block; /* Always show the filter open/close button */
}
input#showAllColumns {
	font-weight: 600; /* Bold text */
}
div#filterTitle {
	width: fit-content; /* Fit to text inside */
	text-align: center;
	font-size: 20px;
	font-weight: 800;
	margin-left: 32px; /* Move to right of arrow buttons; overriden when filter open */
    white-space: nowrap;
}
div#filterFieldsContainer {
	display: flex;          /* left-to-right layout */
	flex-direction: row;
	gap: 1rem;              /* optional spacing */
	overflow-x: auto;       /* horizontal scrollbar if needed */
	overflow-y: hidden;
	white-space: nowrap;    /* prevents wrapping */
}
div#filterFields {
	flex-shrink: 0;         /* important: prevents squishing */
}

/*	Add filter title text margin when filter is expanded.
	4px bottom to keep away from filter fields; auto on sides to center */
div#filter.filterOpen > div#filterTitle {
    margin: 0 auto 0 auto;
}

div#filter.filterOpen > input.filterTopButton {
	display: inline-block;
}
div#filter.filterOpen > div#filterFields {
	display: flex;
}

p#extlistFooter {
	font-size: small;
	margin-bottom: 50px;
}
p#extlistFooter > span {
	color: red;
}