/*****************
* Templates styles *
******************/

/* Infoboxes */

.newInfobox,
.infoboxGame,
.infoboxLocation,
.infoboxItem {
	width: 100%;
	max-width: 500px;
	float: right;
	clear: right;
	padding: 0.25rem;
	margin: 0.5rem 0 0.5rem 0.5rem;
	text-align: center;
	border: 3px solid var(--mdwiki-border-color);
	background-color: var(--mdwiki-tertiary-color);
}

.infoboxTable {
	width: 100%;
	margin: 0.5rem 0 0;
}

.tabber:has(.newInfobox),
.tabber:has(.infoboxGame),
.tabber:has(.infoboxLocation),
.tabber:has(.infoboxItem) {
	width: 525px;
	float: right;
}

@media (max-width: 768px) and (min-width: 551px) {
	.newInfobox,
	.infoboxGame,
	.infoboxLocation,
	.infoboxItem {
		max-width: -moz-fit-content;
		max-width: -webkit-fill-available;
		margin: 0.5rem 0;
	}
}

@media (max-width: 550px) {
	.newInfobox,
	.infoboxGame,
	.infoboxLocation,
	.infoboxItem {
		width: -moz-fit-content;
		width: -webkit-fill-available;
		margin: 0.5rem 0;
	}
	
	.infoboxTable {
		width: 100%;
		margin: 0.5rem 0 0 0;
	}
	
	.tabber:has(.newInfobox),
	.tabber:has(.infoboxGame),
	.tabber:has(.infoboxLocation),
	.tabber:has(.infoboxItem) {
		width: 100%!important;
	}
}

.infoboxTitle {
	margin: 0.1rem;
	padding: 0.25rem;
}

.infoboxDescription {
	margin: 0.1rem;
	padding: 0.25rem;
}

.infoboxGame > .infoboxTitle > p > .infoboxEnTitle {
	font-style: italic;
}

.infoboxKaTitle {
	font-size: 14pt;
	font-weight: bold;
}

.infoboxHeTitle {
	font-size: 8pt;
}

.infoboxImage {
	padding: 1rem;
}

.infoboxContent {
	margin: 0.25rem 0.1rem;
}

.infoboxContext {
	font-weight: bold;
	padding: 0.25rem;
	margin: 1rem 0 0.25rem;
}

.infoboxRow,
.infoboxItemRow {
	display: flex;
	flex-flow: row nowrap;
}

.infoboxHeadRow {
	padding: 0.25rem;
	margin: 0.1rem;
	width: 100%;
	max-width: 33%;
	font-weight: bold;
}

.infoboxBodyRow {
	text-align: left;
	padding: 0.25rem;
	margin: 0.1rem;
	width: 100%;
	max-width: 67%;
}

.infoboxRatingsRow {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.infoboxHeadDatesRow {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	text-align: center;
	padding: 0.25rem;
	margin: 0.1rem;
	width: 20%;
	font-weight: bold;
}

.infoboxBodyDatesRow {
	padding: 0.25rem;
	margin: 0.1rem;
	width: 80%;
}

.infoboxCol {
	display: flex;
	flex-direction: column;
	width: 14%;
}

.infoboxHeadCol {
	text-align: center;
	padding: 0.5rem;
	margin: 0.1rem;
	font-weight: bold;
	word-break: break-all;
	font-size: xx-small;
}

.infoboxBodyCol {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5rem;
	margin: 0.1rem;
	height: 50%;
}

/* Infobox languages */
.infoboxLanguages {
	text-align: center;
	margin: 0.5rem auto;
	width: 50%;
}

.infoboxHeadLanguagesRow {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0.25rem;
	margin: 0.1rem;
	width: 12vw;
	font-weight: bold;
}

.infoboxBodyLanguagesFlag {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	padding: 0.25rem;
	margin: 0.1rem;
	width: 3vw;
}

.infoboxBodyLanguagesRow {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0.25rem;
	margin: 0.1rem;
	width: 100%;
}

.infoboxItemIcon {
	width: 100%;
	max-width: 20%;
}

.infoboxItemCategory {
	width: 100%;
	max-width: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.infoboxNav {
	margin-top: 0.5rem;
}

.infoboxNavContainer {
	height: 300px;
	display: flex;
	flex-flow: column wrap;
	align-items: stretch;
	justify-content: space-between;
	text-align: center;
}

.infoboxNavImgLeft {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15%;
}

.infoboxNavImgRight {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15%;
}

.infoboxNavText {
	flex: 0 0 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*********************
* End infobox styles *
**********************/

/* Misc styles 
The following styles have no groups */
.dungeonItemsContent {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.dungeonItemsContentRow {
	width: 33%;
	padding-bottom: 1rem;
}

@media all and (max-width: 1023px) {
	.dungeonItemsContent {
		flex-flow: column wrap;
		align-items: center;
	}
	
	.dungeonItemsContentRow {
		width: 100%;
	}
}

.infoboxContent > .mw-collapsible-toggle {
	padding: 0.25rem 0.25rem 0 0;
}

/* Interwiki */
.interwiki {
	clear: right;
	margin: 0.25rem 1rem;
	padding: 0.5rem;
	font-size: 90%;
	width: 20rem;
	text-align: left;
	float: right;
	font-style: italic;
	box-shadow: 0.5rem 0.5rem #00000055;
}

@media (max-width: 550px) {
	.interwiki {
		width: -webkit-fill-available;
		margin: 1rem;
	}
}