@font-face {
	font-family: "Determination Sans";
	src: url("/fonts/DTM-Sans.ttf");
}

@font-face {
	font-family: "Determination Mono";
	src: url("/fonts/DTM-Mono.ttf");
}

@font-face {
	font-family: "8bitoperator";
	src: url("/fonts/8bitoperator_jve.ttf");
}

@font-face {
	font-family: "Comic Sans";
	src: url("/fonts/UndertaleSans.ttf");
}

@font-face {
	font-family: "Papyrus";
	src: url("/fonts/PapyrusUndertale.ttf");
}

@font-face {
	font-family: "Wingdings";
	src: url("/fonts/PixelatedWingdings.ttf");
}

@font-face {
	font-family: "Earthbound";
	src: url("/fonts/EBMain.ttf");
}


:root {
	--tb_max_screenwidth: CALC(100vw - 15px);
}


/* ---- Main page styles ---- */

#tb_logo_container {
	display: inline-flex;
	position: relative;
	align-items: center;
}

#tb_title_img_desktop, #tb_title_img_tablet, #tb_title_img_mobile {
	/*zoom: 3;*/
	max-width: 100%;
	image-rendering: pixelated;
}

#tb_logo_sprite_left,
#tb_logo_sprite_right {
	position: absolute;
}

#tb_logo_sprite_left {
	left: -72px;
}

#tb_logo_sprite_right {
	right: -72px;
}

.debug_only:not(.show_debug .debug_only) {
	display: none !important;
}


/* ---- Sections ---- */

.textbox_section_outer {
	position: relative;

	margin: 16px 0;
	border: 1px solid #AAA;
	padding: 4px 6px;
	border-radius: 5px;
	position: relative;

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

.textbox_section_outer.loading::after {
	content: "\e97f";

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

	margin: 0 auto;
	height: 100%;

	font-size: 4em;
	font-family: 'icomoon';

	text-shadow:
		-2px   0  0 var(--background-color),
		 2px   0  0 var(--background-color),
		 0   -2px 0 var(--background-color),
		 0    2px 0 var(--background-color);

	animation: spin 1.5s linear infinite;
}

.textbox_section_title {
	font-weight: bold;
	font-size: 13px;
	text-align: center;
	color: #AAA;

	background-color: var(--background-color);

	position: absolute;
	/*left: 0;
	right: 0;
	top: -8px;*/
	top: -10px;
	/*text-shadow:
		-2px -2px 1px var(--background-color),
		0   -2px 1px var(--background-color),
		2px -2px 1px var(--background-color),
		-2px  0   1px var(--background-color),
		0    0   1px var(--background-color),
		2px  0   1px var(--background-color),
		-2px  2px 1px var(--background-color),
		0    2px 1px var(--background-color),
		2px  2px 1px var(--background-color);*/

	padding: 1px 2px;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.textbox_section_outer:not(.non_collapsable) .textbox_section_title {
	cursor: zoom-out;
}

.textbox_section_outer:not(.non_collapsable) .textbox_section_title::before {
	content: '[ - ]';
	/*margin-right: 4px;*/
    width: 2em;
    display: inline-block;
}

.textbox_section_outer.textbox_section_collapsed {
	padding: 0;
	border-width: 2px 0 0 0;
}

.textbox_section_outer.textbox_section_collapsed .textbox_section_content {
	display: none !important;
}

.textbox_section_outer.textbox_section_collapsed .textbox_section_title::before {
	content: '[ + ]';
}

.textbox_section_outer.textbox_section_collapsed .textbox_section_title {
	cursor: zoom-in;
	/*top: -9px;*/
	top: -11px;
}

.textbox_section_content {
	width: 100%;
}

.textbox_section_outer.loading .textbox_section_content {
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

/* ---- Main form styles ---- */

#tb_form {
	/*width: 440px;*/
	width: calc(440px + (6px + 1px) * 2);
	margin: 0 auto;
}

#tb_form .line,
#tb_stack_div .line {
	display: flex;
}


#tb_form optgroup[label] {
	/*font-size: 18px;*/
	/*font-family: "Determination Sans";
	font-weight: normal;*/
	/*font-weight: bold;*/
}

#tb_form option {
	font-family: 'Ubuntu', sans-serif;
	font-weight: normal;
	font-size: initial;
}

#tb_form #warning {
	color: red;
	font-weight: bold;
	display: block;
}

#spriteSizeWarning {
	color: red;
	font-weight: bold;
}


#tb_form .input_button,
#tb_stack_div .input_button {

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

	box-sizing: border-box;

	margin: 2px;
	width: 20px;
	height: 20px;
	border: 1px solid var(--color-dark);

	flex-shrink: 0;

	font-size: 14px;
	color: white;
	background-color: var(--color-base);

	border-radius: 5px;

}

#tb_form .input_button:hover,
#tb_stack_div .input_button:hover {
	background-color: var(--color-bright);
}

.space-for-info {
	width: 253px;
}


/* ---- Labels, switches and previews ---- */

.label, .input, .shortinput {
	display: inline-block;
}

.label {

	width: 160px;

	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: space-between;

	box-sizing: border-box;

}

.input_container, .input_container select, .input_container input, .button_switch {

	flex-grow: 1;
	align-items: center;

	/* Minimum width, expanded by flex-grow*/
	width: 5em;

}

.input_container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.input_container > *:only-child {
	width: 100%;
}

.input_container .color_box:not(:only-child), .input_container .color_box + select, .input_container .color_box + input {
	width: 25%;
}

.button_switch {
	display: inline-flex;
	justify-content: center;
	/*align-items: baseline;*/
}

.button_switch button, .button_switch .color_box, .input_container button {
	flex-grow: 1;
	justify-content: center;
}

#tb_sprite_preview:hover::after {
	content: '\ea0c'; /* icon-info */
	font-family: icomoon;
	color: white;
	text-shadow: 0 0 2px var(--color-dark), 0 0 2px var(--color-dark);

	position: absolute;
	top: 0.25em;
	right: 0.25em;

	border-radius: 5px;
	background-color: var(--color-base);
	padding: 0.25em;
}

#tb_box_preview, #tb_sprite_preview {
	position: relative;
	min-width: 70px;
	padding: 2px;
	box-sizing: border-box;
}

.preview_options {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.preview_options_left {
	display: inline-block;
	flex-shrink: 1;
	flex-grow: 1;
}

.preview_options_right {
	/* width: 75px; */
	/* height: 70px; */
	min-height: 85px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: 5px;
	margin-left: 0.25em;
}

.preview_container, .undertaleSpriteContainer {
	display: inline-flex;
	height: 70px;
	width: 100%;
	flex-grow: 0;
	align-items: center;
	/*align-content: center;*/
	justify-content: center;
	flex-shrink: 0;

}
.preview_container {
	background-color: black;
	border-radius: 5px;
}
.undertaleSpriteContainer {
	width: 70px;
	filter:
		drop-shadow( 2px   2px 0 black)
		drop-shadow( 2px  -2px 0 black)
		drop-shadow(-2px   2px 0 black)
		drop-shadow(-2px  -2px 0 black);
}

.preview_container > img,
.undertaleSpriteContainer > img {
	/*max-width: 67px;
	max-height: 70px;*/
	max-width: 100%;
	max-height: 100%;
	display: block;
}


/* ---- Other form styles ---- */

#tb_selector_modal_items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*align-items: flex-start;*/
	gap: 1em;

    max-height: 70vh;
	padding-top: 0.25em;
	box-sizing: border-box;

	overflow-x: hidden;
}

#tb_selector_modal_items .tb_selector_modal_item_group {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 1em;
	flex-grow: 1;

	min-width: 45%;
	box-sizing: border-box;
	margin-top: 0.75em;
	padding: 0.5em;

	border: 2px solid var(--color-dark);
	border-radius: 5px;
}
#tb_selector_modal_items .tb_selector_modal_item_group::before {
	content: var(--group-name);

	position: absolute;
	top: -0.75em;

	text-align: center;
	color: var(--color-base);
	font-size: 15pt;
    font-weight: bold;

	background-color: var(--background-color);
    padding: 0 0.25em;
}
#tb_selector_modal_items .tb_selector_modal_item_group:empty {
	display: none;
}

#tb_selector_modal_items .tb_selector_modal_item_group .tb_selector_modal_item,
#tb_selector_modal_items .tb_selector_modal_item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.25em;

	width: 100px;
	min-height: 80px;
	padding: 4px;
	/*margin: 4px;*/
	border: 2px solid var(--color-dark);
	border-radius: 5px;

	text-align: center;
	font-size: 9pt;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#tb_selector_modal_items .tb_selector_modal_item_group .tb_selector_modal_item:hover:not(.selected),
#tb_selector_modal_items .tb_selector_modal_item:hover:not(.selected) {
	border: 2px solid var(--color-bright);
	color: var(--color-base);
}

#tb_selector_modal_items .tb_selector_modal_item_group .tb_selector_modal_item.selected,
#tb_selector_modal_items .tb_selector_modal_item.selected {
	border: 2px solid var(--color-dark);
	background-color: var(--color-base);
	color: white;
	font-weight: bold;
}

.tb_selector_modal_item_label {
	flex-grow: 1;
}

.tb_selector_modal_item.new_item::after {
	content: 'NEW';
	font-weight: bold;

	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tb_selector_modal_item.new_item::after, .tb_selector_modal_item_credits {
	color: white;

	border-radius: 5px;

	background-color: var(--color-base);
	border-color: var(--background-color);
	padding: 0.1em 0.3em;
}

.tb_selector_modal_item.new_item.selected::after, .selected .tb_selector_modal_item_credits {
	background-color: var(--color-dark);
}


.tb_selector_modal_item_label {
	flex-grow: 1;
}

#tb_selector_modal_search {
	margin-top: 0.5em;
	text-align: center;
}

.color_box {
	border: 2px solid rgba(0,0,0,0.5);
	background-color: #FFFFFF;
	box-sizing: border-box;
	height: 1.25em;
	border-radius: 3px;
}

#tb_box_buttons {
	display: flex;
	justify-content: space-between;
	gap: 0.25em;
}

#tb_custom_char_buttons {
	display: flex;
	gap: 0.25em;
}

#tb_custom_char_buttons a {
	flex-grow: 1;
	justify-content: center;
}

#tb_sprite_preview_img_container {
	background-color: black;
	border-radius: 5px;
}

#boxCreator, #spriteCreator {
	margin-top: 2px;
	word-break: break-word;
}


/* ---- Color modal ---- */

.tb_color_modal_color_option {
	display: inline-block;
	border: 2px solid rgba(0,0,0,0.7);
	border-radius: 3px;
	padding: 2px 4px;
	margin: 2px;
	color: white;
	text-shadow:
		1px   0   0   rgba(0,0,0,0.7),
		-1px   0   0   rgba(0,0,0,0.7),
		0     1px 0   rgba(0,0,0,0.7),
		0    -1px 0   rgba(0,0,0,0.7),
		1px   1px 0   rgba(0,0,0,0.7),
		1px  -1px 0   rgba(0,0,0,0.7),
		-1px   1px 0   rgba(0,0,0,0.7),
		-1px  -1px 0   rgba(0,0,0,0.7),
		0     0   0   rgba(0,0,0,0.7),
		0     0   3px rgba(0,0,0,1);

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#tb_colorModal_tabs {
	text-align: center;
}

#tb_colorModal_tabs_buttons {
	border-bottom: 1px solid var(--color-dark);
	margin: 0.25em;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#tb_color_modal_picker_container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
}

#tb_color_modal_input_display {
	position: relative;

	background-color: #ffffff;
	margin-top: 2em;
	width: 60%;
	padding: 8px;
	text-align: center;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#tb_color_modal_input {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	filter: opacity(0);
}

/* ---- ContentEditable styles ---- */

#tb_text_editor_container {
	flex-direction: column;
	gap: 0.25em;
}

#tb_text_editor_outer {

	--asterisk-char: '*';
	--asterisk-color-1: inherit;
	--asterisk-color-2: inherit;
	--asterisk-color-3: inherit;

	--box-color: #FFFFFF;

	--margin: 3px;

	display: inline-block;

	background-color: black;
	padding: 0;
	margin: var(--margin);

}

#tb_text_editor {

	border: 3px solid var(--box-color);
	padding: 3px;

	font-family: consolas;
	color: white;

	width: 100%;
	height: 100px;
	box-sizing: border-box;

	overflow-y: auto;

	cursor: text;

}

#tb_text_editor > *::before {
	content: var(--asterisk-char);
	margin: 0 4px;
}

#tb_text_editor > *:nth-child(1):before {
	color: var(--asterisk-color-1);
}

#tb_text_editor > *:nth-child(2):before {
	color: var(--asterisk-color-2);
}

#tb_text_editor > *:nth-child(3):before {
	color: var(--asterisk-color-3);
}

#tb_text_editor > *:first-child {
	margin-top: 0;
}

#tb_text_editor > *:last-child {
	margin-bottom: 0;
}


/* ---- Textbox ---- */

#undertale_text_box_loader {
	/*overflow: hidden;*/
	/*background-color: #555;*/
	/*border: none;*/
	/*margin: 0 auto;*/
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin-bottom: 6px;
	/*max-width: 90%;*/
	position: relative;
}

#undertale_text_box, #tb_text_editor {
	filter: drop-shadow(0 0 3px black);
}

#tb_box_download {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding-top: 4px;
}


/* ---- Bottom tabs ---- */

#tb_bottom_tabs {
	margin-top: 1em;
}

#tb_bottom_tabs_buttons_parent,
#tb_bottom_tabs_buttons {
	display: flex;
}

#tb_bottom_tabs_buttons_parent {
	justify-content: center;
	gap: 1em;
}


/* ---- Box stacker styles ---- */

/*[id^=tb_stackURL] {
	margin: 8px;
	width: 110px;
	box-sizing: border-box;
	max-width: calc(100% - 16px);
}*/

#tb_stack_div {
	display: flex;
	justify-content: space-around;
	/*margin: 20px 0;*/
	gap: 0.5em;
}
#tb_stack_div, #tb_credits_div {
	border-radius: 5px;
}

#tb_stack_image, #tb_stack_list {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding: 0 10px;
	width: 50%;
	border-radius: 5px;
}

/*#tb_stack {
	padding: 1em 0;
}*/

/*#tb_stack_list p {
	width: 100%;
	padding: 0 2px;
	box-sizing: border-box;
	text-align: center;
}*/

/*#tb_stack {
	width: 295px;
	min-height: 82px;
}*/

#tb_stack_entries {
	display: flex;
	flex-direction: column;
	flex-grow: 1;

	gap: 0.5em;
	min-height: 5em;

	overflow: hidden;
}

#tb_stack_entries:empty {
	border: 1px solid gray;
	border-radius: 5px;
	align-items: center;
	justify-content: center;
}

#tb_stack_entries:empty::after {
	content: ' 'var(--tra-no-stacks)' ';
	color: gray;
	font-style: italic;
}

.stack_entry {
	display: flex;
	gap: 0.25em;
	align-items: center;
}

.stack_entry > div {
	border: 1px solid gray;
	border-radius: 5px;
}

.stack_entry .stack_entry_character,
.stack_entry .stack_entry_text {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	height: 5em;
	box-sizing: border-box;
}
.stack_entry .stack_entry_character {
	width: 69px;
	flex-shrink: 0;
}
.stack_entry .stack_entry_text {
	flex-shrink: 1;
	flex-grow: 1;
	min-width: 6em;
	padding: 0 0.25em;
}
.stack_entry .stack_entry_text:empty {
	color: gray;
	font-style: italic;
}
.stack_entry .stack_entry_text:empty::after {
	content: '-';
}
.stack_entry .stack_entry_actions {
	display: flex;
	flex-direction: column;
	justify-content: center;

	width: 35px;
	flex-shrink: 0;
	border: none;
}

/*
#tb_stack_table {
	border: 1px solid black;
	border-collapse: collapse;
}

#tb_stack_table td, #tb_stack_table th {
	border: 1px solid black;
	padding: 2px;
}

#tb_stack_table thead tr th {
	font-weight: bold;
	border-bottom-width: 2px;
}

#tb_stack_table thead tr th:first-child {
	border-top-left-radius: 5px;
}
#tb_stack_table thead tr th:last-child {
	border-top-right-radius: 5px;
}

#tb_stack_table tbody tr:last-child th:first-child {
	border-bottom-left-radius: 5px;
}
#tb_stack_table tbody tr:last-child th:last-child {
	border-bottom-right-radius: 5px;
}*/


/* ---- Changelog ---- */

/*#tb_changelog_div ul {
	margin-left: 10px;
}*/
#tb_changelog_div ul li {
	/*list-style: none;
	padding-left: 2em;
	text-indent: -2em;*/
	padding-bottom: 0.25em;
	list-style-image: url('/img/list_bullets/check.png');
}

/* To hide line breaks where they shouldn't be */
#tb_changelog_div h4 + br,
#tb_changelog_div ul + br,
#tb_changelog_div ul + br + br {
    display: none;
}

/* Removes top margin from sub-lists */
#tb_changelog_div ul > ul {
	margin-top: 0;
}

/*.new_A  {
	list-style-image: url('/img/list_bullets/a.png') !important;
}

.new_B  {
	list-style-image: url('/img/list_bullets/b.png') !important;
}

.new_C  {
	list-style-image: url('/img/list_bullets/b.png') !important;
}

.new_D  {
	list-style-image: url('/img/list_bullets/b.png') !important;
}

li.gray  {
	list-style-image: url('/img/list_bullets/gray.png') !important;
}*/


#tb_case_note {
	display: flex;
	color: green;
	align-items: center;
	justify-content: space-between;
}

#tb_case_note_buttons {
	display: flex;
}

#tb_loading_overlay {
	display: none;

	position: absolute;

	width: 100px;
	height: 100px;

	color: white;
	font-size: 100px;

	filter: drop-shadow(0 0 2px black);
}

/* -------------------- NON SMALL SCREEN STYLES -------------------- */

@media only screen and (min-width: 916px) {

	#tb_title_img_tablet, #tb_title_img_mobile {
		display: none;
	}

	#tb_title_img_desktop {
		display: block;
	}

}

/* -------------------- SMALL SCREEN STYLES -------------------- */

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

	#tb_title_img_desktop, #tb_title_img_mobile {
		display: none;
	}

	#tb_title_img_tablet {
		display: block;
	}

}

/* -------------------- MOBILE STYLES -------------------- */

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

	/*#tb_title_img_desktop, #tb_title_img_tablet {
		display: none;
	}

	#tb_title_img_mobile {
		display: block;
	}*/

	#tb_form {
		width: 100%;
	}

	#tb_title_img {
		zoom: 2;
	}

	#tb_form .label {
		width: CALC(var(--tb_max_screenwidth) * 0.30);
	}

	#tb_form .input_container,
	#tb_stack_div .input_container {
		width: CALC(var(--tb_max_screenwidth) * 0.60);
	}

	#tb_form .preview_options .input_container {
		width: CALC((var(--tb_max_screenwidth) * 0.60) - 80px);
	}

	#tb_form textarea {
		width: 98%;
	}

	#tb_logo_sprite_left, #tb_logo_sprite_right {
		display: none;
	}

	/*[id^=tb_stackURL] {
		width: auto;
	}*/

	#tb_stack_div {
		align-content: center;
		flex-direction: column;
		margin: 10px;
	}

	#tb_stack_image, #tb_stack_list {
		width: 90%;
		margin-bottom: 20px;
	}

	/*#tb_stack_list p {
		width: 50%;
	}*/

	#tb_loading_overlay {
		width: 50px;
		height: 50px;
		font-size: 50px;
	}

}


/* ---- Super compact (tiny phone) ---- */

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

	#tb_form .line:not(#tb_box_buttons),
	#tb_stack_div .line {
		flex-direction: column;
	}

	#tb_form .label,
	#tb_stack_div .label {
		width: 100%;
		justify-content: center;

		padding: 0 2px;
		border: 1px dotted gray;
		border-radius: 4px 4px 0 0;
		border-bottom: none;
		font-size: 0.9em;
	}

	#tb_form .input_container,
	#tb_stack_div .input_container,
	#tb_form .preview_options .input_container,
	#tb_form .button_switch {
		margin: auto;
		width: 100%;
	}

	#tb_form .input_button {
		margin-left: 6px;
	}

}