/*Panel*/
	.panel {
		padding-bottom: 4px;
	}
	.panel.grow > .panel_inside {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.panel[order]::before {
		content: '';
		height: 2px;
		left: 0;
		right: 0;
		background: var(--color-accent);
		z-index: 3;
		display: block;
		position: absolute;
	}
	.panel[order] {
		position: relative;
	}
	.panel[order="-1"]::before {
		margin-top: -2px;
	}
	.panel[order="1"]::before {
		bottom: 0px;
	}

/*Display*/

	.tabs_small input[type="radio"]:checked+label {
		border-bottom: 3px solid var(--color-accent);
	}
	.tabs_small input[type="radio"] {
		display: none;
	}
	.tabs_small label {
		display: inline-block;
		height: 30px;
		cursor: default;
		text-align: center;
		font-size: 0.9em;
		flex-grow: 1;
		overflow: hidden;
	}
	#color .tabs_small label {
		font-size: 1em;
	}
	div.tabs_small:not(.icon_bar) label {
    	padding-top: 4px;
	}
	.tabs_small  {
		background-color: transparent;
		height: 30px;
		display: flex;
	}
	.tabs_small  label:hover {
		color: var(--color-light);
	}
	#display_sliders p {
		margin-top: 6px;
	}
	#display_bar .tool, #display_ref_bar > div {
		width: calc(100% / 8 - 2px);
		max-width: 52px;
	}
	#display_ref_bar > div > label {
		width: 100%;
	}
	.bar.slider_input_combo {
		position: relative;
		display: flex;
		margin-right: 2px;
	}
	.bar.slider_input_combo input.tool[type="range"] {
		float: none;
		flex-grow: 1;
		flex-shrink: 1;
	}
	.bar.slider_input_combo input.tool[type="number"] {
		width: 60px;
		background-color: var(--color-back);
		float: none;
		flex-grow: 0;
		flex-shrink: 0;
	}

	input#preset_name {
		background-color: var(--color-back);
	}
	#create_preset .dialog_bar > * {
		float: left;
		margin-left: 8px;
	}
	#display_settings p {
		padding-left: 6px;
	}
	div#display_crosshair:after {
		content: "";
		width: 20px;
		height: 2px;
		background-color: var(--color-grid);
		position: absolute;
		margin-left: -9px;
		margin-top: 9px;
	}
	div#display_crosshair {
		width: 2px;
		height: 20px;
		background-color: var(--color-grid);
		position: absolute;
		top: calc(50% - 10px);
		margin-left: 50%;
		margin-right: auto;
	}



/*Outliner*/
	#cubes_list {
		padding-top: 1px;
	}
	#cubes_list > div.vue-tree > ul > li > *:not(ul) {
		display: none;
	}
	#cubes_list > div > ul > li > ul > li:last-child {
		margin-bottom: 180px;
	}
	.outliner_node .outliner_object i, .outliner_object i[class^="icon-"] {
		text-align: center;
		width: 21px;
	}
	.outliner_node .outliner_object i.icon_off {
		opacity: 0.56;
	}
	.outliner_opener_placeholder {
		width: 18px;
		height: 14px;
		float: left;
	}
	.outliner_object {
		width: 100%;
		padding: 2px;
		box-sizing: border-box;
	}
	.outliner_object:active {
	    background-color: var(--color-ui);
	}
	.outliner_object.selected {
		background-color: var(--color-selected);
	}
	.outliner_object:hover {
		color: var(--color-light);
	}
	#cubes_list.drag_hover > .vue-tree {
		position: relative;
	}
	#cubes_list.drag_hover > .vue-tree > ul::before {
		content: '';
		width: calc(100% - 12px);
		height: 2px;
		margin-left: 6px;
		background: var(--color-accent);
		z-index: 3;
		display: block;
		position: absolute;
		bottom: 0px;
	}
	#cubes_list ul {
		position: relative;
	}
	#cubes_list .outliner_line_guide {
		position: absolute;
		top: -4px;
		bottom: 4px;
		width: 4px;
		margin-left: 10px;
		border-left: 2px solid var(--color-text);
		opacity: 0.2;
		pointer-events: none;
	}
	.drag_hover[order]::before {
		content: '';
		width: calc(100% - 12px);
		height: 2px;
		margin-left: 6px;
		background: var(--color-accent);
		z-index: 3;
		display: block;
		position: absolute;
	}
	.drag_hover[order] {
		position: relative;
	}
	.drag_hover[order="-1"]::before {
		margin-top: -1px;
	}
	.drag_hover[order="1"]::before {
		bottom: 0px;
	}
	.drag_hover[order="0"]::before {
		width: 5px;
		height: 30px;
		margin-left: 0;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;

	}
	/*Cancel Dragover for main list*/
	#cubes_list > div > ul > li.outliner_node.parent_li {
		border: none !important;
	}
	.outliner_object input.cube_name {
		width: calc(100% - 84px);
		padding-right: 5px;
		padding-left: 5px;
		pointer-events: none;
	}
	.outliner_object input.cube_name.renaming {
		pointer-events: auto;
	}
	.outliner_object a {
		width: 21px;
		display: inline-block;
		font-size: 15px;
		float: right;
	}
	i.icon-open-state {
	    opacity: 0.7;
	}
	i.icon-open-state:hover {
	    opacity: 1;
	}

	.outliner_object i.ec_0 {
		color: #A2EBFF; /*light_blue*/
	}
	.outliner_object i.ec_1 {
		color: #FFF899; /*yellow*/
	}
	.outliner_object i.ec_2 {
		color: #E8BD7B; /*orange*/
	}
	.outliner_object i.ec_3 {
		color: #FFA7A4; /*red*/
	}
	.outliner_object i.ec_4 {
		color: #C5A6E8; /*purple*/
	}
	.outliner_object i.ec_5 {
		color: #A6C8FF; /*blue*/
	}
	.outliner_object i.ec_6 {
		color: #7BFFA3; /*green*/
	}
	.outliner_object i.ec_7 {
		color: #BDFFA6; /*lime*/
	}
	body > .outliner_object {
		width: 180px;
		padding-left: 0 !important;
		background-color: var(--color-selected);
		box-shadow: 0 0.4px 3.5px rgba(0, 0, 0, 0.6);
	}
	body > .outliner_object a {
		display: none;
	}
	div#outliner_stats {
		float: right;
		margin-right: 16px;
		margin-top: 4px;
		font-weight: normal;
	}
	#outliner.more_options input.cube_name {
		width: calc(100% - 148px);
	}
	#outliner:not(.more_options) a.advanced_option {
		display: none;
	}
	#particle_label {
		float: right;
		margin-right: 10px;
		margin-top: 8px;
		font-weight: normal;
		opacity: 0.8;
		font-size: 0.9em;
		cursor: default;
	}
	.outliner_drag_number {
		color: var(--color-accent_text);
		background-color: var(--color-accent);
		text-align: center;
		padding: 0 5px 0 5px;
		font-weight: normal;
		position: absolute;
		top: -20px;
		left: 20px;
		box-shadow: 0 0 3px black;
	}
	#options .bar .nslide, #options .bar .tool.wide {
		width: 83px;
	}

/*Textures*/
	.texture {
		display: flex;
		height: 48px;
		white-space: nowrap;
		position: relative;
		vertical-align: middle;
		padding-left: 8px;
		padding-right: 8px;
		box-sizing: border-box;
	}
	.texture.selected {
		background: var(--color-selected);
	}
	.texture > i {
		margin-top: 12px;
	}
	.texture > i.clickable:hover {
		color: var(--color-light);
	}
	.texture > i:not(.clickable) {
		opacity: 0.5;
	}
	.texture i.icon_off {
		opacity: 0.56;
	}
	div.texture_icon_wrapper {
		height: 48px;
		width: 48px;
		flex-grow: 0;
		flex-shrink: 0;
		overflow: hidden;
		position: relative;
	}
	.texture.selected img.texture_icon {
		margin-top: 0;
	}
	.texture_drag_helper {
		z-index: 100;
		box-shadow: 0 0 16px black;
	}
	.icon_placeholder {
		width: 48px;
		height: 48px;
	}
	.texture_description_wrapper {
		flex-grow: 1;

	}
	.texture_name {
		margin-top: 2px;
		margin-left: 6px;
		margin-right: 4px;
		overflow: hidden;
		cursor: default;
	}
	.texture:hover  .texture_name {
		color: var(--color-light);
	}
	.texture_res {
		margin-top: -3px;
		margin-left: 6px;
		margin-right: 4px;
		width: 100%;
		height: 20px;
		overflow: hidden;
		font-size: 0.9em;
		opacity: 0.6;
		cursor: default;
	}
	.texture_error {
		position: absolute;
		color: red;
		margin-left: 21px;
		margin-top: 21px;
		text-shadow: 0 0 5px #000;
		font-size: 20pt;
		left: 0;
	}
	.texture_movie {
		position: absolute;
		margin-left: -26px;
		margin-top: 24px;
		text-shadow: 0 0 5px #000;
	}
	.texture[order]::before {
		content: '';
		height: 2px;
		left: 0;
		right: 0;
		background: var(--color-accent);
		z-index: 3;
		display: block;
		position: absolute;
	}
	.texture[order] {
		position: relative;
	}
	.texture[order="-1"]::before {
		margin-top: -1px;
	}
	.texture[order="1"]::before {
		bottom: 0px;
	}
	.texture[order="0"]::before {
		width: 5px;
		height: 30px;
		margin-left: 0;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;

	}

/*Animations*/
	.panel#animations #animations_list {
		min-height: 126px;
		max-height: 294px;
		padding-bottom: 12px;
	}
	.animation {
		height: 38px;
		display: flex;
		white-space: nowrap;
		position: relative;
		vertical-align: middle;
		padding: 8px;
		padding-left: 16px;
		box-sizing: border-box;
	}
	.animation:hover {
		color: var(--color-light);
	}
	.animation.selected {
		background: var(--color-selected);
	}
	.animation > i {
		margin-right: 4px;
	}
	.animation > * {
		flex-grow: 0;
		flex-shrink: 0;
	}
	.animation > label {
		flex-grow: 1;
		flex-shrink: 1;
		overflow: hidden;
	}
	.in_list_button {
		width: 22px;
		color: var(--color-text);
	}
	.in_list_button:hover {
		color: var(--color-light);
	}
	.in_list_button {
		width: 22px;
		color: var(--color-text);
	}
	.in_list_button:hover {
		color: var(--color-light);
	}
	.in_list_button.unclickable {
		opacity: 0.5;
		color: var(--color-text) !important;
		pointer-events: none;
	}

	.animation_file_head {
		height: 28px;
		padding: 2px;
		padding-right: 8px;
		display: flex;
	}
	.animation_file_head:hover {
		color: var(--color-light);
	}
	.animation_file_head > .icon-open-state {
		text-align: center;
		width: 21px;
		margin-top: 4px;
	}
	.animation_file_head > label {
		flex-grow: 1;
		flex-shrink: 1;
		overflow: hidden;
	}

/* Keyframe Panel */
	.panel#keyframe .tabs_small label {
		font-size: 1em;
		height: 30px;
		width: 25%;
	}
	#keyframe_type_label {
		display: flex;
		padding: 4px 8px;
    	height: 30px;
	}
	#keyframe_type_label label {
		flex: 1 0 40px;
	}
	.keyframe_data_point_header {
		display: flex;
		padding: 2px 8px;
		height: 26px;
	}
	.keyframe_data_point_header label {
		flex: 0 0 auto;
	}
	.flex_fill_line {
		flex: 1 0 0;
		border-bottom: 2px solid var(--color-text);
		height: 0;
		margin: 0 10px;
		margin-top: 11px;
		opacity: 0.5;
	}
	.panel#keyframe .bar.flex {
		height: auto;
		min-height: 30px;
	}
	.panel#keyframe .bar.flex label {
		padding: 3px 8px;
		min-width: 20px;
		text-align: center;
		flex-shrink: 0;
		background-color: var(--color-button);
	}
	.panel#keyframe .bar input.dark_bordered {
		width: 100%;
		flex-shrink: 1;
	}
	.panel#keyframe .list {
		max-height: 260px;
		overflow-y: auto;
		background-color: transparent;
	}

	.prism-editor-wrapper {
		caret-color: var(--color-text);
	}
	.molang_input {
		overflow-y: hidden;
		min-height: 30px;
		height: auto;
	}
	.molang_input pre {
		padding: 2px;
		height: 100%;
		min-height: 28px;
		background-color: transparent;
		border-radius: 0;
		cursor: default;
	}
	.molang_input pre code {
		color: #bec2ca;
		padding: 0;
		cursor: auto;
		display: inline-block;
		width: 100%;
		min-height: 24px;
		vertical-align: top;
	}

	.molang_input pre .token.punctuation {
		color: #5ba8c5
	}
	.molang_input pre .token.operator, .molang_input pre .token.keyword {
		color: #fc2f40
	}
	.molang_input pre .token.number, .molang_input pre .token.boolean {
		color: #b99cff
	}
	.molang_input pre .token.function-name {
		color: #94e400
	}
	.molang_input pre .token.selector {
		color: #92dcff;
	}
	.molang_input pre .string {
		color: #e8df6a;
	}



/*Timeline*/
	#timeline {
		display: block;
		height: 300px;
		background-color: var(--color-ui);
	}
	#timeline_vue {
		height: calc(100% - 30px);
	}
	#timeline_body {
		overflow-y: scroll;
		overflow-x: scroll;
		position: relative;
		background-color: var(--color-back);
		height: calc(100% - 30px);
	}
	.timeline_marker {
		position: absolute;
		margin-left: -9px;
		z-index: 5;
		height: 10px;
		width: 20px;
	}
	.timeline_marker::before {
		content: "";
		position: absolute;
		border-style: solid;
		border-bottom-color: transparent !important;
		border-left-color: transparent !important;
		border-right-color: transparent !important;
		border-width: 10px;
		border-radius: 3px;
		pointer-events: none;
		border-color: inherit;
	}
	.timeline_marker:hover::before {
		border-width: 11px;
		margin-left: -1px;
	}
	#timeline_playhead {
		position: absolute;
		z-index: 3;
		cursor: ew-resize;

		height: 26px;
		width: 18px;
		top: 0;
		margin-left: -8px;

		border-right: 9px solid transparent;
		border-left: 9px solid transparent;
		border-top: 12px solid var(--color-accent);
		border-radius: 2px;
	}
	#timeline_playhead::after {
		content: "";
		display: block;
		position: absolute;
		width: 2px;
		background-color: var(--color-accent);
		pointer-events: none;
		margin-left: -1px;
		margin-top: -2px;
		height: 5000px;
	}
	#timeline_endbracket {
		position: absolute;
		z-index: 2;
		cursor: col-resize;

		height: 26px;
	    width: 8px;
		top: 0;
	    margin-left: -7px;

	    border: 1px solid var(--color-accent);
	    border-left-width: 0;
	    border-right-width: 2px;
	}
	div#timeline_endbracket::after {
		content: "";
		width: 16px;
		height: 100%;
		display: block;
		margin-left: -2px;
	}

	#timeline_body .keyframe {
		position: absolute;
		margin-left: -6px;
		z-index: 3;
		text-align: center;
		width: 13.5px;
		height: 23px;
	}
	#timeline_body .keyframe i {
		margin-top: 2px;
		transform: rotate(45deg);
		font-size: 14pt;
		margin-left: -3px;
		pointer-events: none;
	}
	#timeline_body .keyframe i.keyframe_icon_smaller {
		font-size: 11pt;
		margin-top: 4px;
		margin-left: -1px;
	}
	#timeline_body .animator_head_bar .keyframe {
		z-index: 1;
		pointer-events: none;
	}
	#timeline_body .animator_head_bar .keyframe i {
		transform: none;
		font-size: 6pt;
		color: var(--color-grid);
	}
	#timeline_body .keyframe.selected {
		color: var(--color-accent) !important;
		z-index: 4;
	}

	#timeline_header {
		height: 28px;
		display: flex;
		border-bottom: 1px solid var(--color-border);
		border-top: 1px solid var(--color-border);
		position: relative;
	}
	#timeline_corner {
		width: 144px;
		flex-shrink: 0;
		font-family: var(--font-code);
		background-color: var(--color-back);
		padding: 3px;
		padding-left: 8px;
		overflow: hidden;
		background-color: var(--color-back);
		z-index: 4;
	}
	#timeline_time_wrapper {
		height: 100%;
		position: relative;
		background-color: var(--color-back);
	}
	#timeline_time {
		height: 100%;
		position: relative;
		margin-left: 8px;
		border-bottom: 1px solid var(--color-selected);
	}
	.timeline_timecode {
	    padding-left: 4px;
	    padding-top: 2px;
	    height: 100%;
	    position: absolute;
	    pointer-events: none;
	}
	.timeline_timecode > span {
		display: block;
		margin-top: -4px;
		font-size: 0.9em;
		margin-left: -6px;
	}
	.timeline_timecode > .substeps {
	    width: 100%;
	    height: 8px;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    display: flex;
	}
	.timeline_timecode > .substeps > div {
	    border-left: 1px solid var(--color-text);
	    height: 4px;
		flex-grow: 1;
		margin-top: 4px;
		opacity: 0.3;
	}
	.timeline_timecode > .substeps > div:first-child {
	    height: 100%;
		margin-top: 0;
		opacity: 0.48;
	}


	#timeline_body_inner {
		min-height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	#timeline_selector {
		display: none;
	}
	#timeline_body li > div {
		height: 24px;
		display: flex;
		border-bottom: 1px solid var(--color-border);
	}
	.channel_head {
		position: relative;
		display: flex;
		width: 144px;
		height: calc(100% + 1px);
		background-color: var(--color-ui);
		border-right: 1px solid var(--color-border);
	    border-left: 2px solid transparent;
		box-shadow: 1px 8px 10px 0 #00000038;
		z-index: 5;
	}
	#timeline_body li > .animator_head_bar .channel_head:hover {
		color: var(--color-light);
	}
	#timeline_body li > .animator_channel_bar .channel_head {
		padding-left: 16px;
	}
	.animator.selected .channel_head {
	    border-left-color: var(--color-accent);
	}
	.channel_head .text_button {
		width: 26px;
		height: 24px;
		text-align: center; 
		float: left;
		flex-shrink: 0;
	}
	.animator_channel_bar .channel_head .text_button {
		float: right;
	}
	.animator_channel_bar .channel_head .text_button .channel_mute {
		font-size: 11pt;
	}
	.channel_head span {
		flex-grow: 1;
		flex-shrink: 1;
		overflow: hidden;
	}
	.animator_channel_bar .channel_head span {
		opacity: 0.75
	}
	.keyframe_section {
		flex-grow: 1;
		position: relative;
	}
	.animator_channel_bar > .keyframe_section {
		background-color: var(--color-ui);
	}
	.animator_close_button:hover {
		background-color: var(--color-close);
	}
	#timeline_empty_head {
		flex-grow: 1;
	}

	.keyframe .keyframe_waveform {
		height: 23px;
		width: 8000px;
		position: absolute;
		top: 0;
	}
	.keyframe .keyframe_waveform > polygon {
		fill: var(--color-grid);
		stroke: none;
		stroke-width: 0;
	}


/*UV*/
	.UVEditor {
		position: relative;
	}
	dialog .UVEditor {
		z-index: 20;
	}
	.UVEditor > .toolbar {
		margin-top: 3px;
	}
	.uv_headline .uv_title {
		float: left;
		padding-top: 3px;
		padding-left: 10px;
	}
	.uv_headline {
		height: 30px;
		background-color: var(--color-back);
		margin-left: -8px;
		margin-right: -8px;
	}
	#uv_dialog_all .UVEditor.selected {
		border-color: var(--color-accent);
		z-index: 21;
	}
	.UVEditor.selected .uv_headline {
		background-color: var(--color-button);
	}
	.uv_headline .tool {
		float: right;
	}
	#project_resolution_status {
		margin: 3px;
		padding: 1px 5px;
		pointer-events: auto;
	}
	#project_resolution_status:hover {
		color: var(--color-light);
	}

	#uv_viewport {
		height: 320px;
		width: 320px;
		position: relative;
		overflow: hidden;
	}
	#uv_frame {
		height: 320px;
		width: 320px;
		margin: 4px;
		margin-bottom: 0;
		position: relative;
	}

	body[mode=paint] #uv_frame {
		cursor: crosshair !important;
	}
	#uv_frame > img {
		position: absolute;
		pointer-events: none;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		object-fit: cover;
		object-position: 0 0;
	}
	div#uv_brush_outline {
		border: 1px solid white;
		width: 0;
		height: 0;
		border-radius: 50%;
		position: absolute;
		pointer-events: none;
		mix-blend-mode: difference;
	}
	.uv_mapping_overlay {
		position: absolute;
		opacity: 0.4;
		cursor: inherit;
		pointer-events: none;
	}
	#uv_size {
		height: 320px;
		width: 320px;
		cursor: move;
		box-sizing: border-box;
		z-index: 1;
		box-shadow: 0 0 0 1.5px #ffffff;
		mix-blend-mode: difference;
	}
	.uv_size_handle {
		position: absolute;
		cursor: move;
	}
	#uv_rotation {
		width: 72px;
		margin-top: 1px;
	}
	.uv_transform_info {
		position: absolute;
		display: block;
		right: 8px;
		top: 8px;
		font-size: 0.9em;
		cursor: default;
		pointer-events: none;
		z-index: 5;
		color: white;
		mix-blend-mode: difference;
		font-weight: 300;
	}
	.panel .bar.next_to_title {
		margin-top: -30px;
		position: relative;
		float: right;
		pointer-events: none;
	}
	.panel .bar.next_to_title > .tool {
		float: right;
		pointer-events: initial;
	}
	#uv_size .ui-resizable-se:before,
	#uv_size .ui-resizable-sw:before,
	#uv_size .ui-resizable-ne:before,
	#uv_size .ui-resizable-nw:before {
		content: "";
		position: absolute;
		height: 7px;
		width: 7px;
		background-color:  var(--color-text);
	}
	#uv_size .ui-resizable-se,
	#uv_size .ui-resizable-sw,
	#uv_size .ui-resizable-ne,
	#uv_size .ui-resizable-nw {
		height: 9px;
		width: 9px;
	}
	#uv_size .ui-resizable-se {right: -6px; bottom: -6px; z-index: 91 !important;}
	#uv_size .ui-resizable-sw {left: -6px; bottom: -6px;}
	#uv_size .ui-resizable-ne {right: -6px; top: -6px;}
	#uv_size .ui-resizable-nw {left: -6px; top: -6px;}

	#uv_frame:hover #uv_size .ui-resizable-handle:before {
		background-color: white;
	}
	#uv_frame:hover #uv_size.dark_frame .ui-resizable-handle:before {
		background-color: black;
	}
	#uv_frame:hover #uv_size .ui-resizable-handle:hover:before {
		background-color: var(--color-accent);
	}
	#uv_size .ui-resizable-se:before {
		bottom: 2px;
		right: 2px;
	}
	#uv_size .ui-resizable-sw:before {
		bottom: 2px;
		left: 2px;
	}
	#uv_size .ui-resizable-ne:before {
		top: 2px;
		right: 2px;
	}
	#uv_size .ui-resizable-nw:before {
		top: 2px;
		left: 2px;
	}

	#texture_selection_rect {
		position: absolute;
		pointer-events: none;
		border: 1px dashed white;
		mix-blend-mode: difference;
	}
	#texture_pasting_overlay {
		position: absolute;
	}
	#texture_pasting_overlay::before {
		content: "";
		display: block;
		position: absolute;
		border: 1px dashed white;
		pointer-events: none;
		z-index: 6;
		width: 100%;
		height: 100%;
	}
	#texture_pasting_overlay > canvas {
		box-shadow: 1px 1px 20px black;
		cursor: move;
		z-index: 5;
		float: left;
	}
	#texture_pasting_overlay > div.control {
		background-color: var(--color-bright_ui);
		position: absolute;
		box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5);
		width: 30px;
		height: 30px;
		bottom: -30px;
		width: max-content;
	}
	#texture_pasting_overlay > div.control > div {
		width: 30px;
		height: 30px;
		padding: 3px;
		float: left;
		color: var(--color-accent_text);
		text-align: center;
	}
	#texture_pasting_overlay > div.control > div:hover {
		background-color: var(--color-accent);
		color: var(--color-accent_text);
	}

/*Chat*/
	#chat {
		z-index: 16;
		min-height: 86px;
		flex-grow: 0;
		flex-shrink: 0;
	}
	#chat_history {
		background: var(--color-back);
		color: var(--color-text);
		min-height: 81px;
		max-height: 320px;
		padding: 5px;
		font-size: 12pt;
		overflow-y: scroll;
		overflow-x: hidden;
		word-break: break-word;
	}
	#chat_history li {
		padding-top: 1px;
		padding-left: 7px;
	}
	#chat_history li b {
	    margin-left: -6px;
	    user-select: text;
	    color: var(--color-text);
	    background-color: var(--color-button);
	    border-radius: 4px;
	    padding: 1px 4px;
	}
	#chat_history li b.self {
	    color: var(--color-accent_text);
	    background-color: var(--color-accent);
	}
	#chat_history li span.text {
		user-select: text;
	}
	#chat_history li span.timestamp {
		opacity: 0.6;
		font-size: 0.8em;
		float: right;
		clear: both;
	}
	#chat_bar {
		height: 32px;
		margin-bottom: 6px;
		margin-top: 5px;
	}
	#chat_input {
		padding: 5px;
		width: calc(100% - 36px);
		margin-left: 2px;
	}
	#chat_bar > i {
		margin: 4px;
	}
	#chat_bar > i:hover {
		color: var(--color-light);
	}

/*Color*/
	#color_panel_head {
		display: flex;
		width: 100%;
		height: 50px;
		padding: 0 8px;
	}
	#color_panel_head .main {
		width: 32px;
		height: 38px;
		flex-shrink: 0;
	}
	#color_panel_head .side {
		height: 100%;
		flex-grow: 1;
		width: calc(100% - 32px);
	}
	#color_panel_head .side input {
		width: 100%;
		height: 28px;
		padding: 0 8px;
		font-family: var(--font-code);
		background-color: var(--color-back);
	}
	#color_panel_head #color_history {
		width: 100%;
		height: 16px;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		scroll-behavior: smooth;
	}
	#color_panel_head #color_history li {
		vertical-align: top;
		display: inline-block;
		width: 30px;
		height: 10px;
	}

	#main_colorpicker_preview {
		margin-top: -35px;
    	border: 1px solid var(--color-border);
		height: 20px;
	}
	#main_colorpicker_preview > div {
		height: 100%;
		width: 36px;
	}
	#palette_list {
		padding: 2px;
		min-height: 160px;
		max-height: 232px;
	}
	#palette_list .color {
		display: inline-block;
		width: 25px;
		height: 25px;
		vertical-align: top;
	}
	#palette_list .color:hover {
		padding: 1px;
	}
	#palette_list .color.selected {
		padding: 3px;
	}
	#palette_list .color.contrast {
		background-color: var(--color-text);
	}
	#palette_list .color .color_inner {
		width: 100%;
		height: 100%;
	}
	.panel#color input.sp-input {
		width: calc(100% - 40px);
		float: left;
	}
	.panel#color .sp-container.sp-flat {
		overflow: visible;
		margin: 2px 4px 0 4px;
		width: calc(100% - 8px);
	}