#canvascontainer {
	flex: 1;
	position: absolute;
	width: 100%;
	height: 100%;
}
canvas {
	flex: 1;
	width: 100% !important;
	height: 100% !important;
}
#loading_mesh {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: auto;	
	text-shadow: 0px 0px 2px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b, 0px 0px 8px #091b3b, 0px 0px 8px #091b3b, 0px 0px 8px #091b3b, 0px 0px 48px #091b3b;
	transition: all 1s;
	opacity: 1;
	backdrop-filter: var(--filter_grayscale);
	user-select: none;
    mask-image: url('../svg/nnnoise_inv_2.svg');
    -webkit-mask-image: url('../svg/nnnoise_inv_2.svg');
}
#loading_mesh::before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	background-color: rgb(var(--shadow_loading));
	mask-image: url('../svg/nnnoise_loading.svg');
	-webkit-mask-image: url('../svg/nnnoise_loading.svg');
	top: 0px;
	left: 0px;
}
#loading_mesh * {
	position: relative;
}
#loading_mesh.transparent {
	opacity: 0;	
}
#loading_mesh.hidden {
	display: none;
	pointer-events: none;
}
#container_top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	max-height: 2160px;
	padding: 12pt 12pt 0pt 12pt;
	pointer-events: none;
	user-select: none;
}
.container_select {
	display: flex;
	flex-direction: row;	
	box-sizing: border-box;	
	pointer-events: auto;
}
.container_select.live {
	margin-top: 1em;
	position: relative;
	z-index: 1100; /* > #loading_mesh */
}
.container_select.transparent {
	opacity: 0;
	pointer-events: none;
}
.container_select.transparent ~ .toggle.toggle_1 {
	opacity: 0;
	pointer-events: none;
  }
.fullscreen {
	content: '';
	height: 29pt;
	aspect-ratio: 1/1;
	right: 5pt;
	top: 4.66em;
	background-image: url("../textures/fullscreen.png");
	background-size: contain;
	position: absolute;
	background-repeat: no-repeat;
	pointer-events: auto;
	transition: all ease-out 300ms 0s;
	z-index: 1200; /* > .container_select.live */
	filter: hue-rotate(0deg) drop-shadow(0px 1px 2px #091b3b) drop-shadow(0px 1px 2px #091b3b) drop-shadow(0px 1px 4px #091b3b) drop-shadow(0px 1px 32px #091b3b);
}
.fullscreen:hover {
	filter: hue-rotate(176deg);
	cursor: pointer;
	filter: hue-rotate(176deg) drop-shadow(0px 1px 2px #091b3b) drop-shadow(0px 1px 2px #091b3b) drop-shadow(0px 1px 4px #091b3b) drop-shadow(0px 1px 32px #091b3b);
}
.checkbox {	
	position: relative;
	z-index: 800;
	height: 24pt;
	width: 24pt;
	background-image: url("../textures/cross.png");
	background-size: cover;
	margin-top: -6pt;
	filter: drop-shadow(0px 1px 2px #091b3b) drop-shadow(0px 1px 2px #091b3b) drop-shadow(0px 1px 4px #091b3b) drop-shadow(0px 1px 32px #091b3b);
}
.checkbox.checked {	
	background-image: url("../textures/checkmark.png");
	width: 28pt;
	margin-right: -4pt;	
}
.toggle {

}
.toggle_1 {
	margin: 12pt 0pt 12pt 0pt;
}
.toggle_2 {

}
.toggle_subcat {
	margin-left: 12pt;
}
.toggle_select {
	margin-left: -4pt;
	color: rgb(var(--c_text_red_rgb));
	transition: margin .3s;
	text-shadow: 0px 0px 2px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b, 0px 0px 8px #091b3b, 0px 0px 8px #091b3b, 0px 0px 8px #091b3b, 0px 0px 48px #091b3b;
}
.toggle_select.selected {
	color: rgb(var(--c_text_green_rgb));
}
.container_select:hover {
	cursor: pointer;
}
.container_select:hover .toggle_select, .container_select:hover .selected {		
	margin-left: 4pt;
	margin-right: -8pt;
	color: rgb(var(--c_text_red_rgb));
}
.toggle_right .container_select:hover .toggle_select, .toggle_right .container_select:hover .selected {
	margin-right: -8pt;
}
.toggle_left {
	display: flex;
	flex-direction: column;
}
.toggle_right {
	display: flex;
	flex-direction: column;
}
.container_center {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.map {
	display: flex;
	justify-content: center;
	width: 100%;
	pointer-events: auto;
	height: 24px;
	position: relative;
}
.map:hover {
	cursor: pointer;
	color: rgb(var(--c_text_red_rgb));
}
.map:not(.title) {
	border-image-repeat: repeat repeat;	
	opacity: 0;
	transition: opacity .6s;
	pointer-events: none;	
}
.map:not(.title):hover {
	cursor: pointer;
	position: relative;
	z-index: 1000;
	filter: drop-shadow(0px 1px 2px #091b3b) drop-shadow(0px 1px 2px #091b3b) drop-shadow(0px 1px 4px #091b3b) drop-shadow(0px 1px 32px #091b3b);
	/* Edge */
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
}
.map:not(.title):hover::after {
	transition: none; /* Mouse-out transition only */
  }
.map.selected:not(.title) {	
	height: 0px;
	opacity: 0;
	pointer-events: none;
}
.map.title.selected ~ .map:not(.title):not(.selected) {
	opacity: 1;	
	pointer-events: auto;
}
.map.title {
	position: relative;
}
.map.title::after {
	content: '';
	position: absolute;
	width: 200%;
	height: 68%;
	top: 1.2em;
	background-image: url('../textures/menu_downarrow.png');
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.74;
	transition: all 150ms ease-out 0s;
	pointer-events: none;
	mask-image: url('../textures/menu_downarrow_mask_l.png'),url('../textures/menu_downarrow_mask_r.png'),url('../textures/menu_downarrow_mask_c.png');
	mask-repeat: no-repeat;
	mask-size: 20% 100%,20% 100%,20% 100%;
	mask-position: 25%,75%,center;
	-webkit-mask-image: url('../textures/menu_downarrow_mask_l.png'),url('../textures/menu_downarrow_mask_r.png'),url('../textures/menu_downarrow_mask_c.png');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 20% 100%,20% 100%,22% 100%; /* +2% edge transition */
	-webkit-mask-position: 25%,75%,center;
}
.map.title:hover::after {
	opacity: 0.94;
	mask-size: 25% 100%,25% 100%,52% 100%;
	mask-position: left,right,center;
	-webkit-mask-size: 25% 100%,25% 100%,52% 100%;
	-webkit-mask-position: left,right,center;
}
.map.title.selected::after {
	opacity: 0;
}
.map:not(.title)::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .3s ease-in;
}
.map:not(.title):hover::after {
	opacity: 1;
}
.map.img0:not(.title)::after {
	border-image-source: url("../textures/startspawn_box0.png");
	border-image-slice: 72 132 89 74;
	border-image-width: 8px 16px 10px 10px;
	border-image-outset: 6px 24px 3px 17px;
}
.map.img1:not(.title)::after {
	border-image-source: url("../textures/startspawn_box1.png");
	border-image-slice: 71 138 92 134;
	border-image-width: 10px 22px 10px 22px;
	border-image-outset: 10px 20px 5px 18px;
}
.map.img2:not(.title)::after {
	border-image-source: url("../textures/startspawn_box2.png");
	border-image-slice: 53 69 56 62;
	border-image-width: 8px 14px 8px 14px;
	border-image-outset: 8px 24px 3px 22px;
	border-image-repeat: repeat stretch;	
}
#container_bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	box-sizing: border-box;
	padding: 0pt;
	pointer-events: none;
	z-index: 100;
	opacity: .99;
	transition: opacity .3s;
	bottom: 0px;
	width: 100%;
	transition: opacity .3s;
	user-select: none;
}
#container_bottom.transparent {
	opacity: 0;
}
#container_bottom.hidden {
	display: none;
}
.container_legend {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0pt;	
	flex-wrap: wrap;
	align-items: center;
	transition: all .3s;
	pointer-events: auto;
	filter: var(--filter_grayscale);
	opacity: 0.18;
}
.container_legend.disabled {
	pointer-events: none;
}
.container_legend.transparent {
	opacity: 0.26;	
}
.container_legend:hover {
	filter: none;
	opacity: 1;
}
.container_legend:hover .legend_name {
	color: rgb(var(--c_text_red_rgb));
}
.legend_row {
	display: flex;
	flex-direction: row;
}
.legend_img {
	max-height: 40pt;
	max-width: 98pt;
}
.legend_name {
	padding: 12pt 6pt 12pt 6pt;
	text-shadow: 0px 0px 2px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b, 0px 0px 8px #091b3b, 0px 0px 8px #091b3b, 0px 0px 8px #091b3b, 0px 0px 48px #091b3b;
}
.legend_img.row2_2 {
	max-width: 50pt;
	margin-top: auto; 
}
.legend_img.dropshadow {
	filter: drop-shadow(1px 0px 1px #091b3b) drop-shadow(1px 0px 1px #091b3b) drop-shadow(0px 0px 4px #091b3b);
}
#container_right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	box-sizing: border-box;
	min-width: min-content;
	height: 100%;
	padding: 0px;
	pointer-events: none;
	right: 0px;	
	z-index: 400;
	opacity: 1;
	transition: opacity .3s;
	user-select: none;
}
#container_right.transparent,#container_left.transparent {
	opacity: 0;
}
#container_right.hidden,#container_left.hidden {
	display: none;
}
.container_startspawn {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	padding: 0pt;
	pointer-events: auto;
	cursor: pointer;
}
.container_startspawn:not(:last-child) {
	margin-bottom: 12pt;
}
.startspawn_name {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	text-shadow: 0px 0px 2px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b, 0px 0px 1px #091b3b, 0px 0px 8px #091b3b, 0px 0px 8px #091b3b, 0px 0px 8px #091b3b, 0px 0px 48px #091b3b;
	margin-right: 12pt;
}
.startspawn_bg {
	height: 32px;
	width: 32px;
	margin-right: 12pt;	
	position: relative;
	/* Color from JS */
}
.startspawn_img {
	position: relative;
	z-index: 500;
	filter: drop-shadow(1px 0px 1px #091b3b) drop-shadow(1px 0px 1px #091b3b) drop-shadow(0px 0px 4px #091b3b);
}
.startspawn_img.img0 {
	margin: -6px 6px 6px -6px;
	height: 46px;
	width: 50px;
}
.startspawn_img.img1 {
	margin: -9px 8px 9px -8px;
	height: 52px;
	width: 48px;
}
.startspawn_img.img2 {
	margin: -6px 8px 6px -8px;
	height: 44px;
	width: 48px;
}
.container_startspawn:hover .startspawn_name {
	color: rgb(var(--c_text_red_rgb));
}
.container_startspawn:hover .startspawn_bg {
	background-image: linear-gradient(135deg,rgba(var(--c_text_red_rgb),1)0%,rgba(1,2,4,0)100%);
}