/*Dialog*/
	#blackout {
		display: none;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: var(--color-dark);
		opacity: 0.6;
		z-index: 19;
	}
	.dialog_close_button {
		position: absolute;
		right: 0px;
		top: 0px;
		height: 30px;
		width: 30px;
		padding: 4px;
		cursor: pointer;
	}
	.dialog_close_button:hover {
		color: var(--color-light);
		background-color: var(--color-close);
	}
	.dialog:not(.draggable) .dialog_close_button {
		top: 8px;
		right: -34px;
	}

	dialog {
		width: 540px;
		min-width: min(370px, 100%);
		max-height: calc(100% - 40px);
		height: auto;
		flex-direction: column;
		background-color: var(--color-ui);
		color: inherit;
		border: none;
		box-shadow: 0 0px 8px rgba(0, 0, 0, 0.64);
		left: unset;
		right: unset;
		bottom: unset;
		display: none;
	}
	dialog > content {
		display: block;
		overflow-y: auto;
		flex: 1 1 auto;
	}

	@media (max-device-width: 640px) {
		dialog {
			width: 100% !important;
		}
	}

	dialog p > code {
		background-color: var(--color-back);
		border: 1px solid var(--color-border);
		user-select: text;
	}

	.dialog {
		position: fixed;
		z-index: 20;
		top: 30px;
	}
	.dialog:not(.draggable) {
		left: 0;
		right: 0;
		margin-right: auto;
		margin-left: auto;
	}
	.dialog:not(.ui-resizable) {
		min-width: min(400px, 100%);
		max-width: min(660px, 100%);
	}
	.dialog.paddinged {
		padding: 24px;
		padding-bottom: 12px;
	}
	.dialog_bar {
		position: relative;
		min-height: 30px;
		margin-top: 4px;
		margin-bottom: 4px;
		height: auto;
		clear: both;
	}
	.dialog_bar.form_bar {
		display: flex;
	}
	.dialog_bar.form_bar .half {
		flex-grow: 1;
	}
	.dialog_bar::after {
		content: "";
		clear: both;
		display: block;
	}
	.dialog_bar.narrow {
		min-height: 30px;
	}
	.dialog_bar.button_bar {
		text-align: right;
		margin-top: 12px;
		flex: 0 0 auto;
	}
	.dialog_bar button.large {
		margin-bottom: 0;
		margin-top: 16px;
		margin: 16px 4px 0 4px;
	}
	.dialog_bar button.confirm_btn:not(:hover) {
		background-color: var(--color-selected);
	}
	.dialog_bar input[type=checkbox] {
		padding: 0 4px;
	}
	.dialog_bar .tool {
		position: relative;
		margin: 0;
	}
	.dialog_bar.small_text li {
		list-style: auto;
		margin-left: 20px;
		padding-left: 4px;
	}
	.dialog_vector_group {
		display: flex;
	}
	.dialog_vector_group > input {
		min-width: 30px;
		flex-grow: 1;
		flex-shrink: 1;
	}
	.dialog_vector_group > input:not(:last-child) {
		margin-right: 3px;
	}
	.tab_bar {
		height: 30px;
		display: flex;
	}
	.tab_bar > * {
		height: 100%;
		padding-top: 2px;
		flex-grow: 1;
		cursor: default;
		text-align: center;
		vertical-align: middle;
	}
	.tab_bar > .open {
		border-bottom: 3px solid var(--color-accent);
	}
	.tab_bar > *:hover {
		color: var(--color-light);
	}


	.dialog .tab_content {
		height: calc(100% - 90px);
		width: 100%;
		padding-bottom: 16px;
	}
	.dialog p {
		margin: 4px 0;
	}
	.dialog h3 {
		margin-left: 16px;
	}
	.dialog_handle {
		cursor: pointer;
		overflow: hidden;
		padding-left: 26px;
		padding-top: 1px;
		background: var(--color-button);
		height: 30px;
		margin-bottom: 20px;
		font-size: 1.12em;
		flex: 0 0 auto;
	}
	.dialog.paddinged .dialog_handle {
		margin-top: -24px;
		margin-left: -24px;
		margin-right: -24px;
	}
	.dialog_bar label.in_toolbar {
		padding-left: 0;
	}
	.dialog p.multiline_text {
		margin-top: 0;
		margin-bottom: 20px;
		margin-left: 12px;
		margin-right: 12px;
		font-size: 0.86em;
		user-select: text;
	}

	dialog .form_bar_file .input_wrapper {
		position: relative;
		flex-grow: 1;
	}
	dialog .form_bar_file .input_wrapper input {
		width: 100%;
		padding-right: 30px;
	}
	dialog .form_bar_file .input_wrapper > .material-icons {
		position: absolute;
		margin-left: -28px;
		margin-top: 4px;
		opacity: 0.75;
		right: 4px;
	}
	dialog .form_bar_file:hover .input_wrapper > .material-icons {
		opacity: 1;
	}
	dialog .form_bar_radio {
		display: flex;
	}
	dialog .form_bar_radio:hover {
		color: var(--color-light);
	}
	dialog .form_bar_radio label {
		flex-grow: 1;
		padding: 3px 5px;
	}
	dialog .dialog_form_description {
		margin-left: auto;
		padding-top: 8px;
		font-size: 13px;
		height: 28px;
		color: var(--color-subtle_text);
		display: block;
		width: 16px;
		text-align: center;
	}
	dialog .dialog_form_description:hover {
		color: var(--color-light);
		transition: color 750ms linear;
	}

/*Settings Dialog*/
	dialog#settings {
		width: min(100%, 600px);
	}
	#settings_tab_bar {
		margin: -24px;
		margin-bottom: 0;
		margin-top: -20px;
	}
	#settings h2 {
		margin-top: 20px;
		margin-bottom: 8px;
	}
	#settings h3 > i {
		margin-top: 5px;
		float: left;
	}
	#settings h3 > i.settings_expand_icon {
		opacity: 0.7;
	}
	#settings h3:hover {
		color: var(--color-light);
	}
	#settings .bar.next_to_title {
		margin-top: -60px;
	}
	dialog#settings .search_bar {
		margin-top: 26px;
	}


	/*Settings*/
	#settings li h3 {
		margin: 0;
		padding: 0;
		padding-top: 6px;
	}
	#settingslist {
		width: 100%;
		max-height: 600px;
		overflow-y: scroll;
		clear: both;
	}
	#settingslist li > ul {
		margin-left: 24px;
	}
	#settingslist li li {
		padding: 5px 0;
	}
	#settingslist li li:hover input[type=checkbox] {
		color: var(--color-light);
	}
	#settingslist li > .setting_element {
		width: 50px;
		text-align: center;
		float: left;
		margin-top: 12px;
	}
	#settingslist input[type=checkbox] {
		margin-top: -6px;
	}
	#settingslist input[type=checkbox]::before {
		font-size: 18pt;
	}
	#settingslist li > .setting_icon {
		margin-top: 8px;
	}
	#settingslist li > .setting_label {
		display: inline-block;
		margin-left: 8px;
		width: calc(100% - 60px);
	}
	#settingslist .setting_name {
		font-size: 1.1em;
		height: 24px;
	}
	#settingslist .setting_description {
		font-size: 0.94em;
		color: var(--color-subtle_text);
	}
	#settingslist input[type=number] {
		height: 28px;
		width: 100%;
		background-color: var(--color-button);
		padding-left: 4px;
		border: 1px solid var(--color-border);
	}
	#settingslist input[type=text], #settingslist input[type=password] {
		padding: 10px;
		margin-left: 5px;
		vertical-align: bottom;
	}
	#settingslist div.bar_select {
		margin: 8px;
		width: 96%;
	}
	#settingslist div.bar_select select {
		width: 100%;
	}
	#settingslist li li .setting_icon i {
		font-size: 26pt;
		width: 34px;
		margin-top: -6px;
	}
	#settingslist li li:hover .setting_icon i {
		color: var(--color-light);
	}
	.password_toggle {
		display: inline-block;
		margin-left: 4px;
		margin-top: 4px;
		width: 24px;
		text-align: center;
		vertical-align: text-bottom;
	}

	/*Keybinds*/
	#keybindlist {
		max-height: 600px;
		padding-bottom: 25px;
		overflow-y: scroll;
		overflow-x: hidden;
		clear: both;
	}
	#keybindlist .tool {
		height: 30px;
		width: 25px;
		float: right;
	}
	#keybindlist li > div.keybindslot {
		width: calc(48% - 32px);
		padding: 4px;
		padding-left: 8px;
		height: 30px;
		background-color: var(--color-back);
		border: 1px solid var(--color-border);
		font-size: 0.94em;
		overflow: hidden;
		white-space: nowrap;
		display: inline-block;
	}
	#keybindlist li > div.keybindslot:hover {
		color: var(--color-light);
	}
	#keybindlist li > div.keybindslot.conflict {
		  border-left: 4px solid var(--color-close);
	}
	#keybindlist li > div:first-child {
		background: transparent;
		width: calc(52% - 28px);
		text-align: right;
		padding: 4px;
		padding-left: 8px;
		vertical-align: top;
		display: inline-block;
	}
	#keybindlist > li > ul > li {
		position: relative;
		display: flex;
	}
	#keybindlist > li {
		width: 100%;
		min-height: 34px;
		padding-left: 6px;
	}

	/*Colors*/
	div#color_wrapper {
		columns: 2;
		margin-bottom: 20px;
	}
	.color_field {
		min-height: 50px;
		width: 100%;
		margin: 2px 0;
	}
	.color_field .desc {
		width: calc(100% - 60px);
		display: inline-block;
	}
	.color_field p {
		margin: 0;
		font-size: 0.94em;
		color: var(--color-subtle_text);
	}
	.color_field h4 {
		margin: 0;
		font-size: 1.2em;
	}
	.layout_color_preview {
		height: 45px;
		width: 45px;
		margin: 4px;
		display: inline-block;
		vertical-align: top;
	}
	.prism-editor-wrapper .prism-editor__line-numbers {
		background-color: var(--color-back) !important;
		height: 56px;
	}
	#css_editor {
		border: 1px solid var(--color-border);
	}

	/*About*/
	#about_page_title {
		vertical-align: top;
		opacity: 0.9;
	}

/*Specific Dialogs*/
	.dialog#texture_edit p.multiline_text {
		width: 344px;
		min-height: 51px;
	}
	p.multiline_text span {
		user-select: inherit;
	}
	#texture_menu_thumbnail {
		float: right;
		margin-top: 3px;
		margin-right: 12px;
		height: 128px;
		background-color: var(--color-back);
		overflow-y: auto;
	}
	#texture_menu_thumbnail img {
		width: 128px;
		margin-bottom: -7px;
	}
	#import_texture_list li {
		height: 112px;
		width: 112px;
		margin: 3px;
		position: relative;
		display: inline-block;
		background-repeat: no-repeat;
		background-size: contain;
		box-sizing: content-box;
		border: 1px solid transparent;
	}
	#import_texture_list li:hover {
		background-color: var(--color-selected);;
	}
	#import_texture_list li.selected {
		border-color: var(--color-accent);
	}
	#import_texture_list li.selected::after {
		position: absolute;
		content: "\f00c";
		font-family: 'Font Awesome 5 Free';
		font-weight: 600;
		color: var(--color-accent);
		background-color: var(--color-ui);
		height: 19px;
		margin-right: 0;
		margin-left: 100px;
		margin-top: -10px;
		border-bottom-left-radius: 8px;
		padding-left: 2px;
	}
	body.entity_mode button.entity_mode_uv_button {
		display: block;
		padding: 0;
		height: 32px;
		width: 73px;
		border: none;
	}
	/*Scale*/
	#model_scale_range {
		width: calc(100% - 50px);
		float: left;
		height: 31px;
		padding-top: 3px;
	}
	#model_scale_label {
		width: 50px;
		padding-top: 3px;
		text-align: center;
		float: left;
	}
	#scaling_clipping_warning {
		color: #ff384b;
	}
	.borderless {
		margin: 0;
		padding: 0;
		border: none;
	}

	/*Extrusion*/
	#image_extruder label {
		float: left;
		margin-right: 8px;
		padding-top: 5px;
	}
	#scan_tolerance {
		width: 200px;
	}
	#scan_tolerance_label {
		margin-left: 8px;
	}
	#extrusion_canvas {
		margin-left: 12px;
		border-bottom: 1px solid #000;
		border-right:  1px solid #000;
	}
	button.large:first-child {
		margin-left: 0;
	}

	/*Import entity texture*/
	dialog#select_texture > ul {
	    max-height: 420px;
	}

	/*Selection Creator*/
	input[type=range].dark_bordered {
		height: 30px;
		padding-top: 3px;
		padding-left: 0;
	}
	select.dark_bordered {
		color: var(--color-text);
		padding: 6px;
		padding-top: 2px;
		height: 30px;
	}
	label.name_space_left {
		float: left;
		min-width: 155px;
		margin-top: 4px;
		margin-left: 1px;
		margin-right: 8px;
		flex-shrink: 0;
	}

	/*PE Import Dialog*/
    #pe_list {
        max-height: 600px;
        margin-bottom: 20px;
        overflow-y: scroll;
    }
    #pe_list li {
        overflow: hidden;
    }
    #pe_list li > * {
        margin: 0;
        margin-left: 12px;
        cursor: default;
        overflow-x: hidden;
    }
    #pe_list li.selected {
        background-color: var(--color-selected);
    }
    #pe_list li > .pe_icon {
        height: 48px;
        width: 48px;
        float: left;
        margin: 4px;
        margin-right: 8px;
        margin-bottom: 0;
    }
    #pe_list li > h4 > span {
        font-size: 0.7;
    }

/*Keybind Recording*/
	#overlay_message_box {
		height: 100%;
		width: 100%;
		position: absolute;
		z-index: 130;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.8);
	}
	#overlay_message_box > div {
		margin-top: 64px;
		width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
	#overlay_message_box > div > p {
		margin-bottom: 20px;
	}
	#overlay_message_box h3 i {
		vertical-align: sub;
		margin: 8px;
		font-size: 1.2em;
	}

/*Plugin Menu*/
	.bar.next_to_title {
		display: inline-block;
		vertical-align: text-bottom;
	}
	.dialog.draggable .bar.next_to_title {
		width: max-content;
		margin-top: -51px;
		margin-left: 111px;
		float: left;
	}
	.dialog#plugins {
		width: 100%;
	}
	#plugins .tab_bar {
		width: calc(100% - 300px);
	}
	#plugin_list {
		max-height: 600px;
		overflow-y: scroll;
		min-height: 80px;
	}
	#plugin_list > li {
		min-height: 128px;
		overflow-y: hidden;
		margin: 8px;
		background-color: var(--color-ui);
		margin-right: 2px;
	}
	#plugin_list > li.expanded {
		min-height: 128px;
		height: auto;
	}
	/*#plugin_list > li.testing .title {
		border-bottom: 3px solid var(--color-accent);
	}*/
	#plugin_list > li .icon_wrapper {
		display: inline;
	}
	#plugin_list > li > * {
		margin: 0;
		margin-left: 12px;
		cursor: default;
	}
	#plugin_list > li .button_bar {
		height: auto;
		float: right;
		margin-left: -1px;
		margin-top: 0;
		text-align: right;
	}
	#plugin_list > li .button_bar.tiny {
		color: var(--color-subtle_text);
		font-size: 0.86em;
		padding-right: 2px;
	}
	#plugin_list > li button {
		min-width: 100px;
		width: auto;
		height: 36px;
		float: right;
		padding: 4px;
		margin-left: -1px;
		margin-top: 6px;
		color: var(--color-text);
		transition: width 100ms ease-in;
	}
	#plugin_list > li button > i {
		float: left;
		margin-top: 2px;
	}
	#plugin_list > li .title {
		width: auto;
		float: left;
		font-size: 1.34em;
		padding-top: 8px;
		margin-bottom: -5px;
		height: 48px;
	}
	#plugin_list > li .title i {
		font-size: 0.9em;
		padding: 3px;
		float: left;
		margin-top: 5px;
		margin-right: 6px;
	}
	#plugin_list > li .title i.plugin_expand_icon {
		display: none;
	}
	#plugin_list > li .title:hover i.plugin_expand_icon {
		display: inline-block;
	}
	#plugin_list > li .title:hover .plugin_icon {
		display: none;
	}

	#plugin_list .author {
		color: var(--color-subtle_text);
		font-size: 0.86em;
		clear: both;
	}
	#plugin_list .description {
		font-size: 0.94em;
		max-height: 48px;
		margin-right: 12px;
	}
	#plugin_list .about {
		margin-right: 12px;
		padding-top: 12px;
		overflow-y: auto;
		max-height: 480px;
	}
	#plugin_list {
		--color-tag-source: #ff7a52;
		--color-tag-mc: #73e473;
		--color-tag-misc: var(--color-accent);
	}
	#plugin_list > li ul.plugin_tag_list {
		margin-bottom: 5px;
		line-height: 0;
	}
	.plugin_tag_list li {
		display: inline-block;
		background-color: var(--color-tag-misc);
		color: var(--color-accent_text);
		max-width: 180px;
		height: 22px;
		padding: 0 4px;
		border-radius: 5px;
		font-size: 0.9em;
		margin: 2px;
		white-space: nowrap;
    	overflow: hidden;
		line-height: normal;
	}
	.no_plugin_message {
		text-align: center;
		margin-top: 30px;
		color: var(--color-subtle_text);
	}
	.search_bar {
		float: right;
		position: relative;
		width: 220px;
	}
	.search_bar input {
		float: right;
		padding-right: 20px;
		width: 100%;
	}
	.search_bar i {
		float: right;
		position: absolute;
		right: 6px;
		margin-top: 5px;
	}

/*UV*/
	#uv_dialog {
		width: 1108px;
	}
	#uv_dialog .tab {
		width: 14.28%;
	}
	#uv_dialog_all .UVEditor {
		float: left;
		padding: 8px;
		padding-top: 0px;
		border: 1px solid var(--color-border);
		margin-right: -1px;
		margin-bottom: -1px;
	}
	#uv_dialog_toolbar {
		clear: both;
		padding: 12px;
		height: 42px;
		padding-top: 5px;
	}
	#uv_dialog_all .UVEditor .uv_transform_info {
		top: 30px;
	}
	#uv_dialog #uv_viewport {
		margin-left: -8px;
	}



/*Toolbar Dialog*/
	#bar_item_list {
		max-height: 400px;
		margin-bottom: 20px;
		overflow-y: scroll;
		min-height: 80px;
		border: 1px solid var(--color-border);
		border-right: none;
	}
	#bar_item_list li {
		padding: 4px; 
	}
	#bar_item_list li:hover {
		color: var(--color-light);
	}
	#bar_item_list li div.icon_wrapper {
		display: inline-block;
		height: 26px;
		vertical-align: text-top;
	}
	#bar_item_list li:not(:hover) div.icon_wrapper.add, #bar_item_list li:hover div.icon_wrapper.normal {
		display: none;
	}
	#bar_items_current {
		background-color: var(--color-back);
		overflow: hidden;
		height: auto;
		min-height: 34px;
		border: 1px solid var(--color-border);
	}
	#bar_items_current li {
		min-width: 20px;
	}
	#bar_items_current li .toolbar_separator {
		width: 12px;
		background-color: var(--color-button);
		border: 1px solid var(--color-border);
	}

/*Action Control*/
	#action_selector {
		position: absolute;
		display: block;
		z-index: 24;
		right: 0;
		left: 0;
		margin-left: auto;
		margin-right: auto;
		top: 200px;
		width: 360px;
		height: 42px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	}
	#action_selector > input {
		width: 100%;
		height: 42px;
		padding: 5px;
		padding-left: 12px;
		background-color: var(--color-ui);
		border: 1px solid var(--color-border);
	}
	#action_selector > i {
		position: absolute;
		right: 6px;
		top: 9px;
	}
	#action_selector > div {
		background-color: var(--color-ui);
		color: var(--color-text);
		width: 340px;
		margin-left: 8px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	}
	#action_selector ul {
		background-color: var(--color-bright_ui);
		color: var(--color-accent_text);
		min-height: 20px;
		width: 340px;
		max-height: 400px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	#action_selector > div > div {
		background-color: var(--color-ui);
		color: var(--color-text);
		height: auto;
		padding: 5px;
		font-size: 0.94em
	}
	#action_selector ul > li {
		height: 30px;
		padding: 4px;
		overflow: hidden;
		display: flex;
		white-space: nowrap;
	}
	#action_selector ul > li div.icon_wrapper {
		flex-grow: 0;
		flex-shrink: 0;
	}
	#action_selector ul > li span {
		padding-left: 4px;
		flex-grow: 1;
		flex-shrink: 0;
	}
	#action_selector ul > li label {
		font-size: 0.84em;
		padding: 2px;
		flex-grow: 0;
		flex-shrink: 1;
	}
	#action_selector ul > li.selected {
		background-color: var(--color-accent);
		color: var(--color-accent_text);
	}
	#action_selector ul > li div.icon_wrapper {
		display: inline-block;
		height: 26px;
		vertical-align: text-top;
	}
	@media (max-device-width: 640px) {
		dialog#action_selector {
			top: 26px;
		}
	}

	#bar_item_list {
		max-height: 400px;
		margin-bottom: 20px;
		overflow-y: scroll;
		min-height: 80px;
		border: 1px solid var(--color-border);
		border-right: none;
	}
	#bar_item_list li {
		padding: 4px; 
	}
	#bar_item_list li:hover {
		color: var(--color-light);
	}

/* Edit History */
#edit_history_list ul {
	margin-left: 14px;
}
#edit_history_list ul li {
	height: 30px;
	padding: 2px 6px;
	cursor: pointer;
	border: 2px solid transparent;
	display: flex;
	justify-content: space-between;
}
#edit_history_list ul li.current {
	border-color: var(--color-accent);
}
#edit_history_list ul li:hover {
	color: var(--color-light);
}
#edit_history_list ul li.selected {
	background-color: var(--color-accent);
	color: var(--color-accent_text);
	position: relative;
}
#edit_history_list ul li.selected:not(:first-of-type)::before {
	content: "\f04b";
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
	font-size: 14px;
	color: var(--color-accent);
	display: block;
	position: absolute;
    top: -11px;
    left: -16px;
}
#edit_history_list .edit_history_time {
	color: var(--color-subtle_text);
}
#edit_history_list ul li.selected .edit_history_time {
	color: inherit;
}