/*Layout*/
	#page_wrapper {
		height: calc(100% - 26px);
		width: 100%;
		border: 2px solid var(--color-frame);
		border-top: none;
		background-color: var(--color-dark);
		display: flex;
		flex-direction: column;
	}
	#page_wrapper.invisible {
		visibility: hidden;
	}
	body {
		background-image: url('../assets/logo_cutout.svg');
		background-repeat: no-repeat;
		background-size: 128px;
		background-position: center;
	}
	#loading_error_message {
		height: 100%;
		width: 100%;
		background-color: var(--color-dark);
		border: 2px solid var(--color-accent);
		text-align: center;
		padding-top: 160px;
		position: absolute;
		z-index: 250;
	}
	#work_screen {
		--toolbar-height: 30px;
		position: relative;
		display: grid;
		overflow: hidden;
		grid-template-columns: 332px auto 314px;
		grid-template-rows: var(--toolbar-height) minmax(200px, 5000px) 26px;
		grid-template-areas: 
			"left_bar toolbar toolbar"
			"left_bar center right_bar"
			"left_bar status_bar right_bar";
		width: 100%;
		min-height: 300px;
	}

	#tab_bar {
		height: 30px;
	}
	.sidebar {
		background-color: var(--color-ui);;
		display: flex;
		flex-direction: column;
	}
	#left_bar {
		grid-area: left_bar;
	}
	#right_bar {
		grid-area: right_bar;
	}

	#center {
		grid-area: center;
		background-color: var(--color-dark);
		min-width: 100px;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	div#center > div {
		max-height: 100%;
	}
	#preview {
		flex-grow: 1;
		background-repeat: no-repeat;
		background-size: 1000px;
		position: relative;

		--color-solid: #c1c1c1;
		--color-outline: var(--color-accent);
		--color-gizmohover: var(--color-outline);
		--color-ground: var(--color-back);
		--color-axis-x: #fd3043;
		--color-axis-y: #26ec45;
		--color-axis-z: #2d5ee8;
	}
	#status_bar {
		grid-area: status_bar;
	}
	#top_slot,
	#bottom_slot {
		background-color: var(--color-ui);
	}
	.single_canvas_wrapper {
		height: 100%;
		width: 100%;
		/*overflow: hidden;*/
		position: absolute;
		cursor: inherit;
	}
	.quad_canvas_wrapper {
		height: 50%;
		width: 50%;
		position: absolute;
		cursor: inherit;
	}
	.quad_canvas_wrapper.qcw_x {
		border-right: 2px solid var(--color-grid);
	}
	.quad_canvas_wrapper.qcw_y {
		border-bottom: 2px solid var(--color-grid);
	}
	.quad_canvas_wrapper:not(.qcw_x) {
		right: 0;
	}
	.quad_canvas_wrapper:not(.qcw_y) {
		bottom: 0;
	}

	.resizer {
		position: absolute !important;
		z-index: 12;
	}
	.resizer.vertical { /*	|	*/
		cursor: ew-resize;
		width: 6px;
		margin-left: -4px;
	}
	.resizer.horizontal { /*	__	*/
		cursor: ns-resize;
		height: 6px;
		margin-top: -4px;
	}
	.resizer.disabled {
		pointer-events: none;
	}
	/*
	.resizer:hover, .resizer.ui-draggable-dragging {
	    background-color: var(--color-accent);
	    opacity: 0.2;
	}*/

/* Toast Notification */
	#toast_notification_list {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		z-index: 8;
	}
	.toast_notification {
		position: relative;
		background-color: var(--color-accent);
		color: var(--color-accent_text);
		min-height: 30px;
		margin: 2px;
		padding: 3px 28px 3px 10px;
		width: calc(100% - 4px);
		box-shadow: 0.4px 0.4px 4px rgba(0, 0, 0, 0.7);
	}
	.toast_notification .icon {
		float: left;
	}
	.toast_close_button {
		position: absolute;
		right: 0px;
		top: 0px;
		height: 30px;
		width: 30px;
		padding: 4px;
		cursor: pointer;
	}
	.toast_close_button:hover {
		color: var(--color-light);
	}


/*Head Bars*/
	#main_toolbar {
		background-color: var(--color-ui);;
		grid-area: toolbar;
		overflow: hidden;
		white-space: nowrap;
		display: flex;
	}
	#main_toolbar > * {
		display: inline-block;
	}
	.toolbar_wrapper.tool_options {
		flex-grow: 1;
	}
	header {
		background-color: var(--color-frame);
		grid-area: titlebar;
		overflow: hidden;
		display: flex;
		white-space: nowrap;
		height: 26px;
	}
	header > * {
		display: inline-block;
		height: 100%;
	}
	header ::-webkit-scrollbar {
		height: 0;
	}
	div#corner_logo {
		width: auto;
		height: 26px;
		padding-right: 8px;
		padding-left: 6px;
		margin-left: 4px;
		font-size: 1.2em;
		font-weight: normal;
		color: var(--color-light);
		vertical-align: top;
		margin-top: -0.6px;
	}
	div#corner_logo img {
		margin-top: 3px;
		width: 134px;
	}
	@media (max-width:950px)  {
		div#corner_logo {
			width: 36px;
			overflow: hidden;
		}
	}

	.app-drag-region {
		-webkit-app-region: drag;
	}
	div#header_free_bar.app-drag-region {
		flex-grow: 1;
		overflow: hidden;
		height: auto;
		padding: 3px;
		color: var(--color-subtle_text);
		text-align: center;
	}
	div#header_free_bar.app-drag-region.resize_space {
		margin-top: 4px;
		padding-top: 0;
		height: calc(100% - 4px);
	}
	body.is_mobile div#header_free_bar.app-drag-region {
		display: none;
	}
	#web_download_button {
		margin-left: auto;
		height: 100%;
		padding: 0;
		cursor: pointer;
		background: transparent;
	}
	#web_download_button a {
		text-decoration: none !important;
		height: 100%;
		width: 100%;
		padding: 0 12px;
		cursor: inherit;
	}
	#web_download_button a > i {
		vertical-align: top;
	}
	#web_download_button a > * {
		pointer-events: none;
	}
	#web_download_button:hover a {
		color: var(--color-light);
	}
	#windows_window_menu {
		margin-left: auto;
		flex-shrink: 0;
	}
	#windows_window_menu li {
		display: block;
		width: 42px;
		height: 100%;
		text-align: center;
		float: left;
	}
	#windows_window_menu li:hover {
		color: var(--color-light);
		background-color: var(--color-selected);
	}
	#windows_window_menu li.wwm_r:hover {
		background-color: var(--color-close);
	}
	#windows_window_menu li i:not(.material-icons) {
		font-size: 10pt;
	}
	#windows_window_menu i.material-icons {
		vertical-align: bottom;
	}
	#mac_window_menu {
		width: 68px;
		flex-shrink: 0;
	}
	header .tool .icon {
		font-size: 20px;
	}

/*Mobile*/
	body.is_mobile #page_wrapper {
		border: none;
	}
	body.is_mobile #work_screen {
		display: grid;
		grid-template-rows: auto minmax(200px, 5000px) 26px 36px !important;
		grid-template-areas: 
			"toolbar"
			"center"
			"status_bar"
			"panel_selector";
		grid-template-columns: auto !important;
		position: relative;
	}
	body.is_mobile.is_landscape #work_screen {
		grid-template-columns: auto 48px !important;
		grid-template-rows: auto minmax(200px, 5000px) 26px !important;
		grid-template-areas: 
			"toolbar panel_selector"
			"center panel_selector"
			"status_bar panel_selector";
		position: relative;
	}
	body.is_mobile.is_landscape.mobile_sidebar_left #work_screen {
		grid-template-columns: 48px auto !important;
		grid-template-areas: 
			"panel_selector toolbar"
			"panel_selector center"
			"panel_selector status_bar";
	}
	body.is_mobile.is_landscape #work_screen #center {
		flex-direction: row;
	}
	body.is_mobile.is_landscape.mobile_sidebar_left #work_screen #center {
		flex-direction: row-reverse;
	}
	body.is_mobile #main_toolbar {
		display: block;
	}
	body.is_mobile.is_landscape #main_toolbar {
		display: flex;
		height: fit-content;
	}
	body.is_mobile #main_toolbar > * {
		display: block;
	}
	body.is_mobile .toolbar_wrapper.narrow.tools {
		position: absolute;
		z-index: 2;
		top: 0;
		bottom: 0px;
		right: 0px;
		display: flex;
		align-items: end;
	}
	body.is_mobile .toolbar_wrapper.narrow.tools .toolbar {
		height: auto;
		max-height: 100%;
	}
	body.is_mobile #main_toolbar > div.tool_options {
		background-color: var(--color-back);
	}
	body.is_mobile .preview .preview_menu {
		left: 0;
		right: unset;
		flex-direction: row-reverse;
	}
	body.is_mobile .resizer.vertical {
		display: none;
	}
	body.is_mobile .sidebar {
		overflow-y: auto;
	}
	body.is_mobile #left_bar, body.is_mobile #right_bar {
		display: none;
	}

	body.is_mobile #preview {
		overflow: hidden;
	}
	body.is_mobile #panel_selector_bar {
		display: flex;
		grid-area: panel_selector;
		background-color: var(--color-frame);
	}
	body.is_mobile.is_landscape #panel_selector_bar {
		flex-direction: column;
	}
	body.is_mobile #panel_selector_bar .panel_selector {
		height: 36px;
		flex: 36px 1 0;
		text-align: center;
		cursor: default;
		color: var(--color-text);
	}
	body.is_mobile.is_landscape #panel_selector_bar .panel_selector {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	body.is_mobile #panel_selector_bar .panel_selector.selected {
		border-bottom: 3px solid var(--color-accent);
		background-color: var(--color-back);
	}
	body.is_mobile.is_landscape #panel_selector_bar .panel_selector.selected {
		border-bottom: none;
		border-right: 5px solid var(--color-accent);
		padding-left: 5px;
	}
	body.is_mobile.is_landscape #panel_selector_bar .panel_selector.selected {
		border-left: 5px solid var(--color-accent);
		border-right: none;
		padding-right: 5px;
		padding-left: 0;
	}
	body.is_mobile .panel_selector:only-child {
		display: none;
	}
	body.is_mobile #panel_selector_bar .panel_selector .icon_wrapper {
		margin-top: 6px;
	}
	body.is_mobile #mobile_keyboard_menu {
		width: 48px;
		text-align: center;
		padding: 6px;
		position: relative;
		color: var(--color-accent);
	}
	body.is_mobile #mobile_keyboard_menu:hover {
		color: var(--color-light);
	}
	body.is_mobile #mobile_keyboard_menu.enabled::after {
		content: "";
		display: block;
		position: absolute;
		height: 8px;
		width: 8px;
		border-radius: 50%;
		background-color: var(--color-accent);
		bottom: 2px;
		right: 19px;
	}


/*Menu Bar*/
	ul#menu_bar {
		height: 100%;
	}
	li.menu_bar_point {
		font-size: 17px;
		padding: 0 8px;
		padding-top: 2px;
		display: inline-block;
		height: 100%;
		min-width: 42px;
		text-align: center;
		font-weight: normal;
	}
	li.menu_bar_point.opened {
		color: var(--color-accent_text);
		background: var(--color-accent);
	}
	li.menu_bar_point.highlighted {
		animation: menu_item_highlight 1s infinite ease-in-out;
	}
	header .tool {
		height: 100%;
	}
	header .tool > i {
		margin-top: 2px;
	}
	body.is_mobile.is_landscape #title_bar_undo_controls {
		display: block;
	}

	#mode_selector {
		font-size: 1.1em;
		height: 30px;
		margin-left: auto;
		margin-right: 0;
		text-align: right;
	}
	#mode_selector li {
		display: inline-block;
		height: 30px;
		margin: 0 5px;
		overflow: hidden;
    	padding-top: 2px;
    	font-size: 18px;
	}
	#mode_selector li:hover {
		color: var(--color-light);
	}
	#mode_selector li.selected {
		border-bottom: 3px solid var(--color-accent);
	}

/* Tab Bar */
	#tab_bar {
		display: flex;
		flex-direction: row;
		position: relative;
		white-space: nowrap;
		padding-left: 4px;
		background: var(--color-frame);
	}
	#tab_bar #tab_bar_list {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		position: relative;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		margin-right: auto;
	}
	#tab_bar .project_tab {
		background-color: var(--color-back);
		cursor: pointer;
		width: 240px;
		min-width: 120px;
		height: 100%;
		padding: 2px 6px;
		position: relative;
		overflow: hidden;
		display: inline-flex;
		margin-left: 2px;
		border-top: 2px solid transparent;
		left: 0;
		--tabwidth: 202px;
	}
	#tab_bar.drag_mode .project_tab {
		transition: left 100ms ease;
	}
	#tab_bar .project_tab.selected {
		background-color: var(--color-ui);
		cursor: default;
		border-top-color: var(--color-accent);
	}
	#tab_bar .project_tab.selected.new_tab {
		background-color: var(--color-dark);
	}
	#tab_bar .project_tab:not(.selected):hover {
		background-color: var(--color-button);
		color: var(--color-light);
	}
	#tab_bar .project_tab.dragging {
		background-color: var(--color-button);
		color: var(--color-light);
		position: relative;
		z-index: 5;
		box-shadow: 0 0 10px #00000080;
		transition: none;
	}
	#tab_bar .project_tab.move_back {
		left: calc(var(--tabwidth) * -1);
	}
	#tab_bar .project_tab.move_forth {
		left: var(--tabwidth);
	}
	#tab_bar .project_tab > label {
		overflow: hidden;
		width: calc(100% - 20px);
		flex: 1 1 auto;
		padding: 0 4px;
		pointer-events: none;
	}
	#tab_bar .project_tab > * {
		cursor: inherit
	}
	#tab_bar .project_tab_close_button {
		flex: 0 0 24px;
		text-align: center;
		cursor: pointer;
		display: none;
	}
	#tab_bar .project_tab_close_button > * {
		pointer-events: none;
	}
	#tab_bar .project_tab:hover .project_tab_close_button,
	#tab_bar .project_tab.selected .project_tab_close_button,
	#tab_bar .project_tab .project_tab_close_button.unsaved {
		display: block;
	}
	#tab_bar .project_tab_close_button:hover {
		color: var(--color-light);
	}
	#tab_bar .project_tab_close_button.unsaved > i.unsaved_icon {
		font-size: 13px;
		text-align: center;
	}
	#tab_bar .project_tab_close_button.unsaved:hover > i.unsaved_icon,
	#tab_bar .project_tab_close_button.unsaved:not(:hover) > i.close_icon {
		display: none;
	}
	#new_tab_button {
		height: 100%;
		width: 32px;
		text-align: center;
		cursor: pointer;
		padding-top: 4px;
		flex-shrink: 0;
	}
	#new_tab_button:hover {
		color: var(--color-light);
	}
	#search_tab_button {
		height: 100%;
		width: 32px;
		text-align: center;
		cursor: pointer;
		padding-top: 4px;
		flex-shrink: 0;
	}
	#search_tab_button:hover {
		color: var(--color-light);
	}
	#tab_bar .project_tab > label.project_tab_session_badge {
		display: flex;
		flex-grow: 0;
		width: auto;
		color: var(--color-accent);
	}
	#tab_bar .project_tab > label.project_tab_session_badge i {
		margin-right: 2px;
		margin-left: -4px;
	}
	#tab_bar.invisible {
		visibility: hidden;
	}
	.project_thumbnail {
		z-index: 50;
		background-color: var(--color-back);
		position: absolute;
		box-shadow: 0 0 10px rgb(0 0 0 / 40%);
		max-width: 240px;
		image-rendering: auto;
		animation: fade_in_thumbnail 700ms;
		transition: left 100ms ease-in-out;
	}
	@keyframes fade_in_thumbnail {
		0% {
			opacity: 0;
		}
		80% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}


/*Status Bar*/
	#status_bar {
		position: relative;
		display: flex;
		background: var(--color-back);
	}
	#status_bar > div {
		padding-left:  6px;
		padding-right: 6px;
		padding-top: 1px;
		flex-shrink: 0;
	}
	#status_bar > div#status_saved {
		padding-top: 2px;
	}
	#status_bar > div#status_name {
		width: 0;
		flex-grow: 1;
		overflow: hidden;
	}
	#status_bar #status_progress {
		position: absolute;
		height: 4px;
		background: var(--color-accent);
		bottom: 0;
		left: 0;
	}
	#status_bar .status_bar_modifier_key {
		flex-grow: 0.06;
		text-align: center;
		padding-top: 2px;
		font-size: 0.92em;
	}
	#status_bar .status_bar_modifier_key kbd {
		font-family: inherit;
		border-radius: 2px;
		background-color: var(--color-button);
		padding: 1px 5px;
	}
	#status_bar .status_bar_modifier_key span {
		color: var(--color-subtle_text);
	}
	#status_bar .status_selection_info {
		color: var(--color-subtle_text);
	}
	#status_bar .sidebar_toggle_button {
		cursor: pointer;
		padding: 2px;
		padding-right: 0;
		padding-left: 0;
	}
	.sidebar_toggle_button > i {
		cursor: inherit;
	}
	.sidebar_toggle_button:hover {
		color: var(--color-light);
	}

/* Preview */
	.orbit_gizmo {
		position: absolute;
		border-radius: 50%;
		width: 80px;
		height: 80px;
		bottom: 0;
		right: 0;
		opacity: 0.6;
		overflow: hidden;
	}
	.orbit_gizmo:hover, .orbit_gizmo.mouse_active {
		background-color: #00000040;
		opacity: 1;
	}
	.orbit_gizmo > svg {
		width: 100%;
		height: 100%;
		display: block;
		pointer-events: none;
		filter: brightness(0.7);
	}
	.orbit_gizmo > svg path {
		stroke-width: 2px;
		fill: none;
	}
	.orbit_gizmo_side {
		color: var(--color-accent_text);
		position: absolute;
		width: 16px;
		height: 16px;
		margin: -8px;
		border-radius: 50%;
		z-index: 1;
		text-align: center;
		font-size: 12px;
		line-height: 16px;
		font-family: var(--font-code);
	}
	.orbit_gizmo.mouse_active .orbit_gizmo_side {
		pointer-events: none;
	}
	.orbit_gizmo_side[axis="x"], .orbit_gizmo > svg path[axis="x"] {
		background-color: var(--color-axis-x);
		stroke: var(--color-axis-x);
	}
	.orbit_gizmo_side[axis="y"], .orbit_gizmo > svg path[axis="y"] {
		background-color: var(--color-axis-y);
		stroke: var(--color-axis-y);
	}
	.orbit_gizmo_side[axis="z"], .orbit_gizmo > svg path[axis="z"] {
		background-color: var(--color-axis-z);
		stroke: var(--color-axis-z);
	}
	.orbit_gizmo_side.background {
		z-index: 0;
		filter: brightness(0.7);
	}
	.orbit_gizmo:not(.mouse_active) .orbit_gizmo_side:hover {
		background-color: var(--color-bright_ui) !important;
		filter: brightness(1);
	}
/* GIF Recorder */
	#gif_recording_frame {
		pointer-events: none;
		position: absolute;
		border: 2px dashed var(--color-accent);
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}
	#gif_recording_frame.recording {
		pointer-events: none;
	}
	#gif_recording_frame_label {
		text-align: center;
		color: var(--color-subtle_text);
		font-family: var(--font-code);
		pointer-events: initial;
    	cursor: move;
	}
	#gif_recording_controls {
		pointer-events: initial;
		background-color: var(--color-ui);
		box-shadow: 0 0 8px #00000040;
		height: 30px;
		width: fit-content;
		margin: auto;
		position: absolute;
		display: flex;
		bottom: 0;
		right: 0;
		left: 0;
	}
	.gif_recording_frame_handle {
		pointer-events: initial;
		position: absolute;
		width: 22px;
		height: 22px;
		cursor: move;
	}
	#gif_recording_frame.recording .gif_recording_frame_handle {
		display: none;
	}
	.gif_recording_frame_handle:hover {
		color: var(--color-light);
	}
	#gif_recording_controls .gif_record_button:hover {
		filter: brightness(1.2);
	}
	#gif_recording_frame.recording .gif_record_button {
		animation: record_button_blink 0.5s infinite;
		pointer-events: none;
	}
	@keyframes record_button_blink {
		0% {opacity: 0;}
		50% {opacity: 0;}
		51% {opacity: 1;}
	}
	.gif_recording_frame_handle.gif_resize_ne {cursor: ne-resize}
	.gif_recording_frame_handle.gif_resize_nw {cursor: nw-resize}
	.gif_recording_frame_handle.gif_resize_se {cursor: se-resize}
	.gif_recording_frame_handle.gif_resize_sw {cursor: sw-resize}
	.gif_recording_frame_handle.gif_resize_ne i {transform: rotate(-45deg);}
	.gif_recording_frame_handle.gif_resize_nw i {transform: rotate(225deg);}
	.gif_recording_frame_handle.gif_resize_se i {transform: rotate(45deg);}
	.gif_recording_frame_handle.gif_resize_sw i {transform: rotate(135deg);}

/* Amend Edit Menu */
	#amend_edit_menu {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding-right: 30px;
		margin: auto;
		width: fit-content;
	}
	#amend_edit_menu > div.amend_edit_line {
		background-color: var(--color-ui);
		padding: 0px 8px;
		height: 30px;
		display: flex;
	}
	#amend_edit_menu > div.amend_edit_line .nslide_tool {
		float: none;
	}
	#amend_edit_menu > div.amend_edit_line > label {
		padding: 4px 6px;
	}
	.amend_edit_close_button {
		position: absolute;
		right: 0px;
		top: 0px;
		height: 30px;
		width: 30px;
		padding: 4px;
		cursor: pointer;
	}
	.amend_edit_close_button:hover {
		color: var(--color-light);
	}