#appBingoBoardContainer {
	width: 100%;
	display: flex;
	justify-content: center;
}

#appBingoBoard {
	width: min-content;
	display: grid;
	justify-items: start;
	border: 2px solid var(--canvas-surface-border);
}

.appBingoCell {
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--canvas-surface);
	font-size: calc(var(--base-font-size) * 1.0);
	text-align: center;
	block-size: 110px;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

@media (max-width: 767px) {
	.appBingoCell {
		width: 50px;
		height: 50px;
		padding: 5px;
		font-size: calc(var(--base-font-size) * 0.75);
		max-block-size: 50px;
	}
	
	.appBingoCell[marked] {
		background-size: 56px 56px;
	}
	
	.appBingoCell[locked] {
		background-size: 56px 56px;
	}
}

.appBingoCell[marked] {
	background-image: url(../icons/iconBingoBoardMark.png);
	background-repeat: no-repeat;
	background-position: center;
}

.appBingoCell[locked] {
	background-image: url(../icons/iconBingoBoardLock.png);
	background-repeat: no-repeat;
	background-position: center;
	cursor: default;
}

.appBingoCell:not([marked]):not([locked]):hover {
	background-color: var(--canvas-panel);
}

#appBingoBoard .appBingoCell {
	aspect-ratio: 1 / 1;
}




#appGenerateBoard {
	margin: 0;
}




html[dataTheme="eclipse"] #objectHomelinkCardBoxGridSizeIcon,
html[dataTheme="twilight"] #objectHomelinkCardBoxGridSizeIcon {
	background-image: url('../icons/iconBingoGridSizeDark.png');
}

html[dataTheme="radiance"] #objectHomelinkCardBoxGridSizeIcon {
	background-image: url('../icons/iconBingoGridSizeLight.png');
}

html[dataTheme="eclipse"] #objectHomelinkCardBoxFreeSpaceToggleIcon,
html[dataTheme="twilight"] #objectHomelinkCardBoxFreeSpaceToggleIcon {
	background-image: url('../icons/iconBingoFreeSpaceToggleDark.png');
}

html[dataTheme="radiance"] #objectHomelinkCardBoxFreeSpaceToggleIcon {
	background-image: url('../icons/iconBingoFreeSpaceToggleLight.png');
}

#appBingoCardListSearch {
	margin: 0 0.75rem;
}

.appBingoListItemCard {
	padding: 0.25rem;
	border-radius: var(--radius-object);
}

.appBingoListItemCard:hover {
	background-color: var(--canvas-panel);
}

.appBingoListItemCard:not(:last-child) {
	margin-bottom: 10px;
}

.appBingoListItemCardTitleContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.25rem;
}

.appBingoListItemCardTitleIcon {
	margin: 0 0.25rem;
	height: 16px;
	width: 16px;
}

.appBingoListItemCardTitle {
	font-size: calc(var(--base-font-size) * 1);
	font-weight: bold;
}

html[dataTheme="eclipse"] .appBingoListItemCardTitleIcon,
html[dataTheme="twilight"] .appBingoListItemCardTitleIcon {
	content: url('../icons/iconBingoEntryCardDark.png');
}

html[dataTheme="radiance"] .appBingoListItemCardTitleIcon {
	content: url('../icons/iconBingoEntryCardLight.png');
}

.appBingoListItemCardDescriptionContainer {
	padding: 5px;
}

.appBingoListItemCardDescriptionContainer p {
	font-size: calc(var(--base-font-size) * 0.75);
}

.appBingoListItemCardToggleStatus > button {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	border: none;
}

.appBingoListItemCardMarkIcon, .appBingoListItemCardUnmarkIcon {
	margin: 0 0.25rem;
	height: 16px;
	width: 16px;
}

html[dataTheme="eclipse"] .appBingoListItemCardMarkIcon,
html[dataTheme="twilight"] .appBingoListItemCardMarkIcon {
	content: url('../icons/iconBingoEntryCardMarkDark.png');
}

html[dataTheme="radiance"] .appBingoListItemCardMarkIcon {
	content: url('../icons/iconBingoEntryCardMarkLight.png');
}

html[dataTheme="eclipse"] .appBingoListItemCardUnmarkIcon,
html[dataTheme="twilight"] .appBingoListItemCardUnmarkIcon {
	content: url('../icons/iconBingoEntryCardUnmarkDark.png');
}

html[dataTheme="radiance"] .appBingoListItemCardUnmarkIcon {
	content: url('../icons/iconBingoEntryCardUnmarkLight.png');
}