#textbox-sprites, #overworld-sprites, #battle-sprites {
	display: block;
	width: 100%;
}

.order_buttons_container {
	display: flex;
	justify-content: center;
	gap: 1em;
	margin-bottom: 0.5em;
}

.sprite_card_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 1em;
}


.sprite_card {
	--card-text-color: var(--text-color);
	--card-background-color: transparent;
	--card-background-color-alt: var(--background-color-alt);

	display: flex;
	flex-direction: column;
	align-items: center;

	width: 190px;
	padding: 0.3em;
	/*margin: 0.5em;*/
	box-sizing: border-box;

	border: 1px solid var(--card-text-color);
	border-radius: 5px;

	color: var(--card-text-color);
	background-color: var(--card-background-color);
}
.sprite_card.modified {
	--card-text-color: red;
	--card-background-color: #edacac;
	--card-background-color-alt: #ffdede;
}
.dark_mode .sprite_card.modified {
	--card-text-color: #ffdede;
	--card-background-color: darkred;
	--card-background-color-alt: #580000;
}
.sprite_card.saving {
	--card-text-color: #7a4300;
	--card-background-color: #e4bc76;
	--card-background-color-alt: #ffdea3;
}
.dark_mode .sprite_card.saving {
	--card-text-color: #ffdea3;
	--card-background-color: #7a4300;
	--card-background-color-alt: #422400;
}
.sprite_card.saved {
	--card-text-color: green;
	--card-background-color: #8ce88c;
	--card-background-color-alt: #c6ffc6;
}
.dark_mode .sprite_card.saved {
	--card-text-color: #c6ffc6;
	--card-background-color: #003200;
	--card-background-color-alt: #002500;
}

.sprite_card_image_container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	height: 70px;
	margin-bottom: 4px;
}

.sprite_card_image_container .order_buttons_left,
.sprite_card_image_container .order_buttons_right {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.sprite_card_image {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	border: 2px solid transparent;
	border-radius: 5px;

	width: 67px;
	height: 70px;
}
.sprite_card_image:hover {
	cursor: pointer;
	border-color: var(--color-base);
	background-color: var(--color-brighter);
}
.dark_mode .sprite_card_image:hover {
	background-color: var(--color-darker);
}

.sprite_card_image img {
	max-width: 67px;
	max-height: 70px;
}

/*.sprite_card_image::after {
	content: '\e922';

	font-size: 0.8em;
	font-family: icomoon;
	color: white !important;
	text-shadow: 0 0 2px var(--color-dark), 0 0 2px var(--color-dark);

	position: absolute;
	bottom: -2px;
	right: -2px;

	padding: 0.25em;
	background-color: var(--color-base);
	border: 1px solid var(--color-dark);
	border-radius: 5px;
}*/


.sprite_card_data {
	display: flex;
	flex-direction: column;
	gap: 0.25em;

	width: 100%;
	box-sizing: border-box;
}

.sprite_card input {
	/*border: 1px solid var(--card-text-color) !important;*/
	color: var(--card-text-color) !important;
	background-color: var(--card-background-color-alt) !important;
}

.sprite_card_data_line {
	position: relative;

	display: flex;
	flex-direction: column;
	/*align-items: center;*/
	align-items: flex-start;
	/*gap: 0.25em;*/
	margin-top: 0.7em;
}
.sprite_card_data_line > span {
	position: absolute;
	top: -1em;
	left: 0;
	z-index: 12;

	font-size: 0.7em;
	line-height: 1em;
	/*filter:
		drop-shadow( 1px 0   0 var(--background-color))
		drop-shadow(-1px 0   0 var(--background-color))
		drop-shadow(0    1px 0 var(--background-color))
		drop-shadow(0   -1px 0 var(--background-color));*/
	/*background-color: var(--background-color);*/
	padding: 0 0.5em;

}
.sprite_card_data_line > span,
.sprite_card_data_line > input {
	box-sizing: border-box;
}
.sprite_card_data_line > input {
	position: relative;
	z-index: 11;

	width: 100%;
}

.sprite_card_offsets_inputs {
	display: flex;
	width: 100%;
	gap: 0.5em;
}
.sprite_card_offsets_inputs > div {
	display: flex;
	flex-grow: 1;
}
.sprite_card_offsets_inputs > div > span {
	width: 1em;
	flex-grow: 0;
	flex-shrink: 0;
	text-align: center;
}
.sprite_card_offsets_inputs > div > input {
	width: 1em;
	flex-grow: 1;
	flex-shrink: 1;
}

/*.overworld-offset-inputs {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.overworld-offset-inputs span {
	width: 40px;
}

.overworld-offset-inputs input {
	width: 42px;
}*/


.sprite_card_data_buttons {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 0.25em;
}


.textbox-info-box, .overworld-info-box, .battle-info-box {
	display: inline-block;
	padding-left: 8px;
}

#textbox-new, #overworld-new, #battle-new {
	display: flex;
	justify-content: center;
	align-items: center;
}

#textbox-new button, #overworld-new button, #battle-new button {
	margin-top: 5px;
}

#optionUsable, #optionPublished, #optionAllowcomments {
	margin-left: 26px;
}

#optionDescription {
	width: 100%;
	min-height: 10em;
	resize: vertical;
	box-sizing: border-box;
}

#description_preview_div {
	position: relative;

	border: 1px solid var(--text-color);
	border-radius: 5px 5px 0 5px;

	padding: 0.5em;

	max-height: 50vh;
	overflow-y: auto;
}

#description_editor_buttons, #description_preview_buttons {
	display: flex;
	justify-content: flex-end;
}

#credits_table_wrapper {
	max-height: 70vh;
}

/* Hides the "no credits" message if there are credits */
#credits_tbody:not(:empty) + #credits_tbody_empty {
	display: none;
}

.credit_url_td:empty::after {
	content: '(None)';
	color: gray;
}

.credit_btn_td {
	text-align: center;
}

#tabs {
	display: flex;
	flex-wrap: no-wrap;
	overflow-x: auto;
}

.tab_content {
	border: 1px solid var(--color-base);
	padding: 0.5em;
	box-sizing: border-box;
	border-radius: 0 5px 5px 5px;
}


/* Resize modal */

#resize_modal_container {
	display: flex;
	justify-content: space-evenly;
	gap: 1em;
}

#resize_modal_container > input[type="radio"] {
	display: none;
}

.resize_modal_option {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	flex-grow: 1;
	border: 1px solid var(--text-color);
	border-radius: 5px;
	padding: 0.5em;
}
input[type="radio"]:checked + .resize_modal_option {
	border: 2px solid var(--color-base);
	color: var(--color-base);
	background-color: var(--color-brightest);
}
.dark_mode input[type="radio"]:checked + .resize_modal_option {
	background-color: var(--color-darkest);
}

.resize_modal_option_img_container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 67px;
	height: 70px;
	border: 1px solid darkgray;
	background-color: gray;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.dark_mode .resize_modal_option_img_container {
	border-color: gray;
	background-color: darkgray;
}
input[type="radio"]:checked + .resize_modal_option .resize_modal_option_img_container {
	background-color: var(--color-base);
	border-color: var(--color-base);
}

.resize_modal_option > span {
	text-align: center;
}

#resize_modal_option_img_left {
	height: 70px;
	width: 67px;
}
#resize_modal_option_img_right {
	max-height: 70px;
	max-width: 67px;
}

#resize_modal_option_img_right_division {
	width: 5ch;
}

@media only screen and (max-width: 900px) {

	#textbox-sprites, #overworld-sprites, #battle-sprites {
		justify-content: center;
	}

	.sprite_card {
		width: 150px;
		flex-grow: 1;
	}

	.sprite_card_data_buttons > button {
		font-size: 0.8em !important;
	}

	/*.overworld-offset-inputs span {
		font-size: 12px;
		width: 20px;
	}

	.overworld-offset-inputs input {
		width: 22px;
	}*/

}