.mod-detail-gallery-container {
	background-color: #2d2d2d
}

.mod-detail-tab {
	background-color: #444444
}


.banner {
	height: 260px;
	display: grid;
	grid-template-rows: 5px 1fr min-content 5px;
	grid-template-columns: 5px 1fr auto minmax(min-content, 10px) 5px;
	/* grid-template-columns: 5px; */
	background-color: #171717;
	overflow: hidden;
}
.banner-image {
	grid-row: 1/5;
	grid-column: 1/6;
	/* width: 100%; */
	/* max-height: 100%; */
}

.banner-overlay-left {
	grid-row: 3;
	grid-column: 2;
	/* white-space: nowrap; */
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.banner .category {
	font-size: 12px;
	padding: 0 0 0 3px;
}

.banner .name {
	font-size: 40px;
}

.banner .creators {
	font-size: 16px;
	padding: 4px 4px;
}

.banner .creator {
	font-size: 22px;
	margin: 4px 4px;
}
.banner .creators .small {
	font-size: 12px;
}


.banner-overlay-right {
	grid-row: 3;
	grid-column: 4;
}

.banner-install {
	font-size: 32px;
	padding: 6px;
	background-color: #d3d3d347;
}

/* ===================================== */
/* ===================================== */

.info-container {
	margin: 8px;
	padding: 0;
	background-color: #404040;
	display: flex;
}

.info-container .update {
	padding: 8px;
}

/* ===================================== */
/* ===================================== */

.tags-container {
	margin: 0;
	padding: 5px;
	display: inline-flex;
	flex-wrap: wrap;
	list-style: none;
	white-space: nowrap;
	text-decoration: none;
}
.tags-container li {
	margin: 2px;
	padding: 4px;
	padding-left: 12px;
	padding-right: 12px;
	background-color: #0000008c;
}
.tags-container a {
	color: white;
	text-decoration: none;
}

details {
	margin: 6px;
	margin-top: 0;
	padding: 6px 6px 6px 20px;
	background-color: #0000004f;
}
details > div {
	margin-top: 1em;
}
details h1 {
	font-size: 16px;
	margin-top: 6px;
	margin-bottom: 6px;
}
details h2 {
	font-size: 13px;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 8px;
}
details h3 {
	font-size: 12px;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 17px;
}
details p {
	margin: 6px;
}
details ul {
	margin: 0px;
}


summary {
	font-size: 20px;
	cursor: pointer;
	/* margin-bottom: 2em; */
}

/* ==================================== */
/* Thumb bar                            */
/* ==================================== */

.preview-thumb-container {
	display: flex;
	overflow-x: scroll;
	margin: 8px;
	margin-top: 4px;
	min-height: 118px;
}

.preview-thumb-container picture > img {
	height: 100%;
}

/* ==================================== */
/* Preview                              */
/* ==================================== */

.preview-thumb-a {
	flex-shrink: 0;
	/* margin: 4px; */
	margin-right: 4px;
	margin-bottom: 4px;
}

.preview-thumb-img {
	display:block;
	width: auto;
	height: 100px;
}

.preview-grid {
	display: none;
	position: fixed;
	z-index: 999;
	height: 0;
	width: 0;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.9);
	grid-template-columns: 40px 80px auto 80px 40px;
	grid-template-rows: 30px 60px auto 20px 60px;
	/* max-height: 100%; */
}

.preview-grid:target {
	display: grid !important;
	width: 100%;
	height: 100%;
}


.preview-grid .index {
	grid-row: 2;
	grid-column: 2;
	padding: 16px;
	z-index: 200;
}
.preview-grid .description {
	grid-row: 4;
	grid-column: 3;
}


.preview-image-back {
	grid-row: 2/5;
	grid-column: 2/5;
	/* align-items: center; */
	/* justify-content: center; */
	width: 100%;
	height: 100%;
	/* height: 600px; */
	background-color: rgb(41, 41, 41);
}

.preview-image-front {
	grid-row: 2/4;
	grid-column: 2/5;
	width: 100%;
	/* object-fit: cover; */
	max-width: 100%;
	/* min-height: 100%; */
	/* min-width: 100%; */
	width: 100%;
	max-width: 100%;
	object-fit: scale-down;
	object-position: 0 0;
	width: 100%;
	height: 100%;
	/* max-height: 800px; */
	/* height: 100%; */
}

.light-btn {
	color: #fafafa;
	/* padding: 5px 15px; */
	text-decoration: none;
	cursor: pointer;
	z-index: 99;
	/* padding-bottom: 40px; */
	flex-direction: column;
	justify-content: flex-end;
	font-size: 20px;
	display: flex;
	/* height: 40px; */
}
.light-btn:hover {
	background-color: #1111118c;
}

.btn-prev {
	grid-row: 2/4;
	grid-column: 2;
}
.btn-next {
	grid-row: 3/4;
	grid-column: 4;
}
.btn-close {
	grid-row: 2;
	grid-column: 2/5;
	display: flex;
	flex-direction: row;
}

.preview-btn-lbl {
	background-color: #1111118c;
	/* margin: 10px; */
	padding: 10px;
	user-select: none;
	/* grid-column: 3; */
	/* grid-row: 2; */
}
.preview-btn-lbl-prev {

}
.preview-btn-lbl-next {
}
.preview-btn-lbl-close {
	width: 60px;
}