@font-face {
	font-family: "unscii8";
	src: url(fonts/unscii-8.otf) format("opentype");
}

@font-face {
	font-family: "unscii8tall";
	src: url(fonts/unscii-8-tall.otf) format("opentype");
}

@font-face {
	font-family: "cmodbonus";
	src: url(fonts/cmod_bonus.otf) format("opentype");
}

@font-face {
	font-family: "bitlmtbrk";
	src: url(fonts/8bitlimitbrk.ttf) format("truetype");
}

@font-face {
	font-family: "bubble";
	src: url(fonts/bubble.ttf) format("truetype");
}

@font-face {
	font-family: "mekdings";
	src: url(fonts/MEK-Dings.otf) format("opentype");
}

@font-face {
	font-family: "leafclonk";
	src: url(fonts/Leafclonk.otf) format("opentype");
}

@font-face {
	font-family: "strintel3d";
	src: url(fonts/Strintel-Isometric-3d.otf) format("opentype");
}

@font-face {
	font-family: "wingdings";
	src: url(fonts/wingding.ttf) format("truetype");
}

@font-face {
	font-family: "garden";
	src: url(fonts/4yeogarden.ttf) format("truetype");
}

@font-face {
	font-family: "glagolitic";
	src: url(fonts/glagolitic-aoe.ttf) format("truetype");
}

@font-face {
	font-family: "musisync";
	src: url(fonts/musisync.ttf) format("truetype");
}

@font-face {
	font-family: "pixel_dingbats";
	src: url(fonts/pixel-dingbats-7.ttf) format("truetype");
}

@font-face {
	font-family: "pixelfraktur";
	src: url(fonts/pixelfraktur.ttf) format("truetype");
}

@font-face {
	font-family: "shellybu";
	src: url(fonts/shellybu.ttf) format("truetype");
}

@font-face {
	font-family: "wwfloralcorner";
	src: url(fonts/wwfloralcorner.ttf) format("truetype");
}

@font-face {
	font-family: "yiroglyphics";
	src: url(fonts/yiroglyphics.ttf) format("truetype");
}

* {
	margin: 0;
	padding: 0;
	font-family: "unscii8tall", monospace;
	font-size: 100%;
	vertical-align: baseline;
	outline: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-radius: none;
	border-collapse: collapse;
}

html,
body {
	width: 100%;
	height: 100%;
	font-size: 0.8em;
	color: green;
	overflow: auto;
	scrollbar-width: none;
}

body::-webkit-scrollbar {
	width: 0;
	height: 0;
}

hr {
	border: 1px solid green;
	margin: 5px 0;
	width: 100%;
}

/* CANVAS STUFF */
#canvas_container {
	position: absolute;
	top: 0;
	left: 256px;
	border: 1px solid grey;
	overflow: hidden;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

#preview_canvas {
	cursor: crosshair !important;
	z-index: 9999999;
	position: absolute;
	top: 0;
	left: 0px;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.drawing_canvas {
	position: absolute;
	top: 0;
	left: 0px;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* NAV STUFF */
.menu_item_style {
	font-family: "unscii8tall", monospace;
	height: 30px;
	position: relative;
	padding: 2px 6px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.menu_control_title {
	margin: 0px 2px;
}

.menu_column {
	display: flex;
	flex-flow: column nowrap;
}

.menu_row {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	align-content: center;
	/* background-color: #fff; */
	/* padding: 0 10px; */
}

#save-button,
#share-button,
#clear_memory-button {
	font-family: "pixel_dingbats";
	font-size: 1.3em;
}

#fullscreen-button,
#save-layers-button,
#nav_align-button {
	font-family: "unscii8", monospace;
	font-size: 1.3em;
}

#brush_size_locked_container {
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	font-size: 1.4em;
}

#brush_size_locked {
	font-family: "pixel_dingbats";
}

/* #dropdown-brush_size {
    display: flex;
    flex-flow: row nowrap;
} */

.filter_button {
	font-size: 1em;
	background-color: #444;
	border: none;
	padding: 5px 5px;
	margin-right: 10px;
	cursor: pointer;
	color: green;
	border: 4px solid black;
	border-style: outset;
	margin: 5px 0;
	width: 100%;
}

/* PALETTE MENU */
.palette-bar {
	display: flex;
	flex-flow: column nowrap;
	background-color: #eee;
	padding: 0;
	border-right: 1px solid #ccc;
	user-select: none;

	width: 256px;
	position: fixed;
	/* fixed to top */
	top: 0;
	left: 0;
	bottom: 0;
	height: 100vh;
	z-index: 99999999999999;
	overflow-y: scroll;
	scrollbar-width: none;
	padding-bottom: 50vh;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
}

body.nav_align-right .palette-bar {
	left: auto;
	right: 0;
	border-right: none;
	border-left: 1px solid #ccc;
}

body.nav_align-right #canvas_container {
	left: 0;
}
.palette-bar::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.palette_row {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	padding: 0;
}

#brush_size_container {
	width: 100%;
	align-items: center;
}

#brush_size_container .menu_row {
	width: 100%;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	height: 30px;
}

.nav_preview_canvas {
	width: 20px;
	height: 20px;
}

.randomise_button {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 1px;
	right: 1px;
	border: 1px solid green;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.preset_size {
	border: 1px solid black;
	margin: 1px;
	cursor: pointer;
}

.nav_row {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	/* align-content: center; */
}

.controls {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	align-content: flex-start;
}

.range_and_number {
	justify-content: space-between;
}

.control_title {
	margin: 2px 0 -2px 0;
}

.paint_controls_section {
	width: 100%;
	height: auto;
	display: flex;
	flex-flow: column nowrap;
}

/* DROPDOWN */
.heading {
	width: 100%;
	margin: 6px 4px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.subheading {
	width: 100%;
	margin: 1px 4px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.nav_item {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: 0;
	width: 100%;
	justify-content: space-between;
}

.nav_caret {
	font-size: 1em;
	transform: rotate(0deg);
	margin-left: auto;
	transition: transform 0.3s ease;
}

.nav_caret.rotated {
	transform: rotate(-180deg);
}

.dropdown {
	position: relative;
	display: block;
	/* right: 0px; */
	/* top: 10px; */
	background-color: #bbb;
	padding: 9px 3px;
	margin-left: 8px;
	z-index: 100;
	width: 248px;
}

.hidden {
	display: none;
}

.brush_title {
	padding: 0 3px;
}

/* SLIDERS AND NUMBERS */
.input_number {
	font-family: "unscii8tall", monospace;
	font-size: 1.1em;
	width: 48px;
	height: 22px;
	background-color: black;
	appearance: none;
	-webkit-appearance: none;
	color: green;
	border: 0;
	padding: 0 2px;
}

.range_input_container {
	width: 146px;
	position: relative;
	height: 24px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	align-content: center;
}

.menu_range_input_container {
	width: 160px;
	position: relative;
	height: 24px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	align-content: center;
}

.number_input_container {
	width: 48px;
	margin: 0 4px;
	position: relative;
	height: 24px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	align-content: center;
}

.slider {
	width: 170px;
	height: 22px;
	border: 1px solid green;
	background-color: rgba(0, 0, 0, 0.7);
	appearance: none;
	-webkit-appearance: none;
}

.slider_small {
	width: 100px;
	height: 22px;
	border: 1px solid green;
	background-color: rgba(0, 0, 0, 0.7);
	appearance: none;
	-webkit-appearance: none;
}

.slider:focus,
.slider_small:focus {
	outline: none;
}

.slider::-webkit-slider-runnable-track,
.slider_small::-webkit-slider-runnable-track {
	height: 18px;
	-webkit-appearance: none;
	cursor: pointer;
}

.slider::-webkit-slider-thumb,
.slider_small::-webkit-slider-thumb {
	width: 10px;
	height: 18px;
	background: #00a437;
	cursor: pointer;
	-webkit-appearance: none;
}

.arrows_container {
	position: absolute;
	font-size: 0.7em;
	top: 1px;
	right: 0;
	/* width: 16px;
    height: 16px; */
	right: 0;
	display: flex;
	flex-flow: column nowrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
}

.arrow_box {
	text-align: center;
	flex-flow: column nowrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 11px;
	border: 1px solid green;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.arrow_down {
	border-top: 0;
}

/* Hide arrows by default */
.arrows_container {
	display: none;
	position: absolute;
	/* Position arrows near input */
	margin-left: 10px;
	/* Adjust as needed for positioning */
}

/* Show arrows when input is focused or hovered */
input[type="number"]:hover + .arrows_container,
input[type="number"]:focus + .arrows_container,
.arrows_container:hover {
	display: block;
}

.arrow_up:hover,
.arrow_down:hover {
	display: block;
	color: limegreen;
}

.arrow_up:active,
.arrow_down:active {
	color: green;
}

.arrow_up:after {
	font-size: 0.8em;
	content: "▲";
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 2;
}

.arrow_down:after {
	font-size: 0.8em;
	content: "▼";
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 2;
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea {
	outline: none;
	color: limegreen;
	border: 1px solid darkgreen;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

/* RADIOS AND CHECKBOXES */
input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: black;
	/* margin-right: 2px; */
	margin: 0 5px 0 0;

	font: inherit;
	color: rgb(0, 202, 0);
	width: 16px;
	height: 16px;
	border: 1px solid green;

	display: grid;
	place-content: center;
}

input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: black;
	/* margin-right: 2px; */
	margin: 0 5px 0 0;

	font: inherit;
	color: rgb(0, 202, 0);
	width: 16px;
	height: 16px;
	border: 1px solid green;
	/* border-radius: 3px; */

	display: grid;
	place-content: center;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
	background-color: rgb(45, 45, 45);
}

input[type="checkbox"]::before,
input[type="radio"]::before {
	content: “ ”;
	transform-origin: bottom left;
}

input[type="checkbox"]:checked::before {
	font-size: 2em;
	content: "";
	/* content: "X"; */
}

input[type="radio"]:checked::before {
	font-size: 2em;
	content: "";
	/* content: "X"; */
}

.canvas_blend_radios label {
	padding: 2px 0;
}

/* Hover effect on the label */
.nav_item label:hover {
	background-color: #ccc;
}

/* When the radio input is checked, style the associated label */
/* input[type="radio"].hidden_r:checked+label {
    background-color: #4caf50;
} */

/* BUTTONS */
.wide_button {
	height: 26px;
	font-size: 1em;
	background-color: #ffffff;
	border: none;
	padding: 2px 2px;
	cursor: pointer;
	color: green;
	border: 4px solid rgb(236, 236, 236);
	border-style: outset;
	margin: 4px 0;
	width: 100%;
	text-align: center;
}

.wide_button:active {
	border-style: inset;
}

.touch_automation_buttons {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.touch_automation_button {
	width: 100% !important;
	min-width: 0;
	margin: 4px 0;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

.touch_automation_button_single {
	width: 100%;
}

.touch_automation_button.is_pressed {
	border-style: inset;
}

#dropdown-touch_automations,
#dropdown-touch_automations * {
	-webkit-user-select: none !important;
	user-select: none !important;
	-webkit-touch-callout: none !important;
}

.normal_button {
	width: auto;
	height: 26px;
	font-size: 1em;
	background-color: #444;
	border: none;
	padding: 2px 2px;
	margin-right: 10px;
	cursor: pointer;
	color: green;
	border: 2px solid black;
	border-style: outset;
	margin: 5px 0;
}

.normal_button:active {
	border-style: inset;
}

/* IMAGE LOADING */
input[type="file"] {
	display: none;
}

#drop-zone,
#font_drop-zone {
	width: 300px;
	height: 100px;
	border: 2px dashed #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #666;
}

.file_upload {
	font-size: 1em;
	background-color: #444;
	border: none;
	padding: 5px 5px;
	margin-right: 10px;
	cursor: pointer;
	color: green;
	border: 2px solid black;
	border-style: outset;
	margin: 5px 0;
	text-align: center;
}

#add_image_url {
	margin-right: 10px;
}

#add_image_button {
	font-size: 1em;
	background-color: #444;
	border: none;
	padding: 5px 5px;
	margin-right: 10px;
	cursor: pointer;
	color: green;
	border: 2px solid black;
	border-style: outset;
	margin: 5px 0;
}

/* CANVAS ORGANISER */
.tab_preview {
	/* position: static; */
	border: 1px solid black;
	/* margin-right: 10px; */
}

#canvas_organiser {
	display: flex;
	flex-direction: column;
	gap: 5px;
	/* margin: 10px 0; */
	width: 100%;
	padding: 4px;
}

.canvas_tab {
	cursor: pointer;
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	font-size: 1em;
	background-color: #444;
	border: none;
	padding: 2px 0px;
	cursor: pointer;
	color: green;
	border: 2px solid black;
	border-style: outset;
}

.canvas_tab_inner {
	width: stretch;
	min-width: 80px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: baseline;
	/* align-content: center; */
	/* border: 1px solid green; */
	/* flex-grow: 1; */
}

.layer_tab_button {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	justify-content: center;
	flex: 1;
}

.canvas_tab .handle {
	cursor: grab;
	font-family: "pixel_dingbats";
	transform: rotate(90deg);
	font-size: 1.6em;
}

.canvas_tab .view {
	cursor: pointer;
	font-family: "pixel_dingbats";
	font-size: 1.4em;
}

.canvas_tab .undo {
	font-family: "pixel_dingbats";
	font-size: 1.6em;
}

.canvas_tab .redo {
	font-family: "pixel_dingbats";
	-webkit-transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	transform: scale(-1, 1);
	font-size: 1.6em;
}

.canvas_title {
	width: 80px;
	height: 30px;
	border: 1px solid grey;
	background-color: grey;
	/* padding: 5px; */
	font-size: 1em;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
}

input[type="text"] {
	font-family: "unscii16", monospace;
	font-size: 1em;
	min-width: 100px;
	height: 22px;
	background-color: black;
	color: green;
	border: 1px solid green;
}

.canvas_tab .delete {
	font-family: "unscii8";
	min-width: 26px;
	cursor: pointer;
	font-weight: bold;
	font-size: 1.4em;
	display: flex;
	flex-flow: row nowrap;
	align-items: baseline;
	align-content: center;
	justify-content: center;
}

.canvas_tab.active {
	background-color: #4caf50;
	color: white;
}

#add_canvas_button {
	font-family: "unscii8";
	font-size: 1.2em;
}

#duplicate_layer_button {
	font-family: "pixel_dingbats";
	font-size: 1.2em;
}

#merge_layers_button {
	font-family: "pixel_dingbats";
	font-size: 1.2em;
}

#image_brush_controls {
	display: flex;
	flex-flow: row wrap;
	overflow: scroll;
}

/* Image box stuff */
.color_box {
	border: 1px solid black;
	width: 20px;
	height: 20px;
}

input.hidden_radio {
	position: absolute;
	opacity: 0;
	width: 1em;
	height: 1em;
	top: 0;
	left: 0;
	z-index: 0;
}

input[type="radio"]:checked + label.color_box {
	border: 2px solid lightgreen;
}

/* COLOUR PICKERS */
.color_container {
	/* height: 76px; */
	align-items: start;
	justify-content: space-between;
	background-color: hsl(0 100% 100% / 0);
}

.color_picker_container {
	display: flex;
	flex-flow: column nowrap;
	margin: 0;
	padding: 0;
	align-items: start;
}

.color_picker {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	width: 50px;
	height: 30px;
	border: none;
	cursor: pointer;
	margin: -3px -2px;
	padding: 0;
}

.color_settings_container {
	width: 140px;
	height: 100%;
}

.color_range_input_container {
	width: 106px;
	position: relative;
	height: 24px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	align-content: center;
}

.color_number_input_container {
	width: 48px;
	margin: 0 4px;
	position: relative;
	height: 24px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	align-content: center;
}

.color_input_number {
	font-family: "unscii8tall", monospace;
	font-size: 1.1em;
	width: 48px;
	height: 22px;
	background-color: black;
	appearance: none;
	-webkit-appearance: none;
	color: green;
	border: 0;
	padding: 0 2px;
}

.color_slider {
	width: 88px;
	height: 22px;
	border: 1px solid green;
	background-color: rgba(0, 0, 0, 0.7);
	appearance: none;
	-webkit-appearance: none;
}

.color_picker::-webkit-color-swatch {
	border: 1px solid #000000;
	margin: 0;
	padding: 0;
}

.color_picker::-moz-color-swatch {
	border: 1px solid #000000;
	margin: 0;
	padding: 0;
}

input.clear_color_selector {
	background-color: black;
	/* margin-right: 2px; */
	margin: 0 5px 0 0;

	font: inherit;
	color: red;
	width: 24px;
	height: 24px;
	border: 1px solid green;

	display: grid;
	place-content: center;
	font-size: 2.2em;
}

input.clear_color_selector:hover {
	background-color: rgb(45, 45, 45);
}

input.clear_color_selector::after {
	content: "/";
}

input.clear_color_selector:checked::before {
	content: " ";
}

input.clear_color_selector:checked {
	border: 2px solid green;
}

#quantize_colors_container {
	display: flex;
	flex-flow: row wrap;
	align-items: start;
	justify-content: start;
	align-content: center;
	height: auto;
}