@import "common.less";

@font-face {
	font-family: 'FontAwesome';
	src: url('libs/fontawesome-webfont.eot?v=4.7.0');
	src: url('libs/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('libs/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('libs/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('libs/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('libs/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('res/InterVariable.woff2') format("woff2");
	font-weight: normal;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('res/InterVariable-Italic.woff2') format("woff2");
	font-weight: normal;
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
}

body {
	margin : 0;
	padding : 0;
	background-color : black;
	user-select:none;

	max-width: 100vw;
	max-height: 100vh;

	overflow: hidden;
}

.lm_header .lm_tab {
	font-family: var(--default-font), Serif !important;
}

#message-container {
	pointer-events: none;
	z-index: 9999;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	display: flex;
	flex-direction: column;
	justify-content: end;
	align-content: center;
	align-items: center;
	padding-bottom: 8px;

	.message {
		transition: all 1.0s;
		margin-top: 0px;
		display: flex;
		overflow: hidden;
		outline : 1px solid;
		outline-color: #68686800;
		border-radius : 5px;
		flex-shrink: 1;

		max-height: 0px;

		.icon {
			outline : 0px solid #686868;
			border-radius : 4px 0px 0px 4px;
			padding: 5px 5px 3px 5px;
			background: #666666;
		}

		.text {
			outline : 0px solid #686868;
			border-radius : 0px 4px 4px 0px;
			background: #222222;
			padding: 3px 10px 3px 3px;
		}

		&.show {
			outline-color: #686868;
			margin-top: 4px;
			max-height: 100px;
			transition: all 1.0s;
		}

		&.error {
			background-color: #39221d;
			.text, .icon {
				outline-color: #b64f37;
				color: #fefefe;
			}
			.icon {
				background: #b64f37;
			}
		}
	}
}

.globalErrorMessage {
	position : absolute;
	z-index : 999;
	bottom:0px;
	left:0px;
	padding : 3px;
	background: #400;
	color : red;
	border : 1px solid #C00;
}

//:focus { outline: none; }

:root {
	--default-font: 'Inter';
	--default-font-size: 10pt;

	font-size: var(--default-font-size);
}

ul, li {
	margin : 0;
	padding : 0;
	list-style : none;
}

body, td, th, li, p, a, input, select, textarea {
	font-family : var(--default-font), serif;
	font-feature-settings: "cv08", "cv05"; // Inter uppercase I and lowercase l disambiguation
	color: #aaa;
}

a {
	color : #aaf;
	text-decoration : none;
}

canvas {
	user-select: none;
}

input, textarea {
	padding-left : 4px;
}

.custom-text-edit {
	//padding-left: 2px;
	max-height: 200px; overflow-y:auto; overflow-x:hidden;

	&:focus {
		outline: 1px solid #888888;
		outline-offset: 1px;
	}
}

.custom-text-edit-standalone {
	background-color: rgb(34,34,34);
	border : 1px solid #444;
	padding: 2px 4px;
	&:focus {
		background-color: rgb(20,20,20);
	}
	&:hover {
		border-color : #888;
	}
	.custom-text-edit();
}

select {
	&:focus {
		outline: none;
	}
	&:focus:hover {
		border-color : #444;
	}
}

select, input, textarea, .hide-dropdown >.dropdown-cont {
	background-color: rgb(34,34,34);
	border : 1px solid #444;
	&:focus {
		background-color: rgb(20,20,20);
	}
	&:hover {
		border-color : #888;
	}
}

.select-box {
	color: @color-text;
	border-color: #888;
	border-style: solid;
	border-width: 1px;
	width: 178px;
	display: inline-block;
}

.hide-dropdown {
	position: relative;
	width: 100%;
	>.dropdown-cont {
		z-index: @contextmenu-layer;
		position: absolute;
		width: 100%;

		.filter-input {
			z-index: @contextmenu-layer;
			margin: 4px;
			width: calc(100% - 16px);
		}
		.options {
			z-index: @contextmenu-layer;
			max-height: 200px;
			overflow-y: auto;
			width: 100%;
			.dropdown-option {
				z-index: @contextmenu-layer;
				display : flex;
				align-items: center;
				cursor: pointer;
				padding: 6px;
				user-select: none;

				&.compact {
					padding-top: 0;
					padding-bottom: 0;
				}

				div.tile {
					margin-right : 5px;
				}

				p {
					display: inline-block;
					margin: 0;
				}

				p.option-context {
					margin-right: 5px;
					color: #555;
				}

				&.current-value {
					background-color: #444;
				}
				&.highlighted {
					background-color: #5897fb;
					>p {
						color: #fff;
					}
				}
				&.hidden {
					display: none;
				}
			}
		}
	}
}

.global-seek {
	.hide-dropdown{
		width: auto;
		margin-left: calc(50% - 400px);
		margin-right: calc(50% - 400px);
	}
}

input.file {
	cursor : pointer;

	&.disabled {
		cursor : default;
	}

	&.dragover {
		border-color : white;
		background-color : rgb(20,20,20);
	}
}

input[type=button] {
	background-color : #444;
	cursor : pointer;
	&:hover {
		color : white;
		background-color : #666;
	}
	&:disabled {
		color : rgb(192, 192, 192);
		background-color : rgb(56, 56, 56);
	}
	&:active {
		color : white;
		background-color : #424242;
	}
}

input[type=range] {
	appearance: none;
	background: transparent;
	border:none;
	padding:0;
	&:focus {
		outline: none;
	}
	&::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		outline: 1px solid #aaa;
		height: 6px;
		width: 6px;
		background: #ccc;
		cursor: pointer;
		margin-top: 0px;
	}

	&::-webkit-slider-runnable-track {
		width: 100%;
		height: 8px;
		cursor: pointer;
		background: rgb(20,20,20);
		border: 1px solid #444;
	}
}

input[type=checkbox] {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    width: 13px;
    height: 13px;
    margin: 0;
    margin-right: 1px;
    display: block;
    float: left;
    position: relative;
    cursor:pointer;
	top:1px;
	&:after {
		content:"";
		vertical-align: middle;
		text-align: center;
		line-height: 13px;
		position: absolute;
		cursor: pointer;
		height: 13px;
		width: 13px;
		left:0px;
		top:0px;
		font-size:10px;
		box-shadow: inset 0px 1px 1px #000, 0px 1px 0px #444;
		background: #202020;
		color: #fff;
	}

	&:checked:after {
		content:'\2714';
	}

	&.indeterminate:after {
		content:'-';
	}
}

#mainmenu { display : none }

.hide-scroll {
	max-width : 100%;
	max-height : 100%;
	overflow : auto;
	position: relative;
}

.hide-modal {
	position: fixed;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: rgba(0,0,0,0.2);
	display: table;
	&> .content {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
}

::-webkit-scrollbar {
	width: 10px;
	height: 5px;
	right: 5px;
}

::-webkit-scrollbar-track {
	background: #424242;
	margin: 5px;
}

::-webkit-scrollbar-thumb {
	background: #686868;
	&:hover {
		background: #7b7b7b;
	}
}

::-webkit-scrollbar-corner {
	visibility: hidden;
}

.checkbox-wrapper {
	display:inline-block;
}

.hide-loading {
	width : 16px;
	height : 16px;
	display : inline-block;
	background : url('res/icons/throbber.gif');
}

.hide-scene-container {
	width:100%;
	height:100%;
	position:relative;

	> .error-message {
		background-color: #ff5555;
		box-shadow: 1px -1px 3px rgba(0,0,0,0.5);
		color: black;
		position: absolute;
		z-index: 777;
		bottom: 0px;
		left: 0px;
		right: 0px;
		padding-top: 1em;
		padding-bottom: 1em;
		text-align: center;

		max-height: 50%;
		overflow-y: auto;

		font-weight: bold;
		font-family: var(--default-font);
	}
}

.hide-scene {
	position:absolute;
	cursor: default;
}

.hide-scene-layer {
	width:auto;
	position: absolute;
	z-index: @default-layer;
	max-height: 100%;
}

.scene-partition > .props-column {
	.hide-toolbar {
		padding-bottom: 4px;
	}
}


.scene-partition.reduced-columns {
	.hide-scenetree {
		max-height: 40%;
	}
	.tree-column {
		min-width: 322px;
		max-width: 1402px;
	}

	.props-column {
		max-height: 60%;
		padding-bottom: 36px;
	}
}

.tree-column {
	max-width: 1002px;
}

.splitter {
	position : relative;
	z-index: @splitter-layer;
	background: #000000;
	opacity: .001;
	transition: opacity 200ms ease;

	&:hover, &.dragging {
		background : #444444;
		opacity : 1;
	}

	&.vertical {
		width : 100%;
		height : 5px;
		.drag-handle {
			width : 100%;
			height : 15px;
			position : absolute;
			top : -5px;
			cursor : ns-resize;
		}
	}

	&.horizontal {
		width : 5px;
		height : 100%;
		.drag-handle {
			width : 15px;
			height : 100%;
			position : absolute;
			left  : -5px;
			cursor : ew-resize;
		}
	}
}

.detached {

	.layout-controls:not(& .layout-controls) {
		display : none;
	}

	&.detachable-panel {
		position: fixed;
		bottom : 20px;
		left: 20%;
		right: 620px;
		z-index: @popup-layer;

		.splitter {
			z-index : @popup-layer + 10;
			position : absolute;

			&.handle-right {
				right : -5px;
			}
			&.handle-left {
				left : -5px;
			}
			&.handle-top {
				height : 15px;
				top : -15px;

				.drag-handle {
					cursor : move;
					top : 0px;
				}
			}
			&.handle-bottom {
				bottom : -5px;
			}
		}
	}
}

.custom-editor {
	position: absolute;
	top: 15px;
	right: 15px;
	background-color: #222222;
    border: 1px solid #444;
	padding: 10px;
	h1,h2,h3 {
		margin-top: 0;
	}
}

.hide-scenetree {
	flex: 1;
	background-color : #111;
	border : 1px solid #444;
	max-width: 1000px;
	overflow-y: auto;
	min-height : 350px;
	box-sizing: border-box;
	margin-bottom: 1px;
	border-radius: 3px;
}

@tileselect-cursor-border: 1px;



.hide-range {

	display : inline-block;

	input[type=range] {
		display : inline-block;
		width: 140px;
	}

	input[type=range].small {
		width: 123px;
	}

	input[type=text] {
		display : inline-block;
		width: 44px;
		padding-left:2px;
		margin-left:3px;
		border-color: transparent;
	}
	input[type=text]:hover, input[type=text]:active {
		border-color: #444;
	}
}

.heaps-scene {
	flex: 1;
}

.flex {
	width:100%;
	height:100%;
	display:flex;
	//flex-grow : 100;
}

.flex-elt {
	flex: 1;
	display: flex;
}

.flex.vertical {
	flex-direction: column;
}

.scene-partition .hide-toolbar .button {
	min-width : 16px !important;
	height : 16px !important;
	font-size: 12px !important;
}

.scene-partition .show-cols-btn {
	&:extend(.hide-toolbar .button);
	&:extend(.scene-partition .hide-toolbar .button);

	position: absolute;
	margin-top: 2px;
	right: 0px;

	&:hover {
		&:extend(.hide-toolbar .button:hover);
	}

	&:active {
		&:extend(.hide-toolbar .button:active);
	}
}

.hide-toolbar {

	flex: none;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color : rgb(34,34,34);
	display: inline-flex;

	.layout-btn {
		position: absolute;
		right: 26px;
	}

	.close-btn {
		position: absolute;
		right: 0px;
	}

	.v-separator {
		border-left: 1px solid #444;
		margin: 2px;
	}

	.toolbar-label, .menu {
		display: inline-block;
		min-width : 20px;
		padding : 2px;
		text-align: center;
		text-shadow: 1px 2px 2px black;
		>.icon {
			vertical-align: middle;
			margin-bottom: 2px;
		}
	}

	.menu {
		user-select:none;
		cursor : pointer;
		background : #444;
		padding-left: 5px;
		padding-right: 5px;
	}

	.select {
		padding : 2px;
		padding-top: 4px;
		margin-right : 5px;
		display : inline-block;
		.icon {
			font-size: 16px;
			vertical-align: top;
		}
		>select {
			margin-left : 5px;
			min-width : 100px;
		}
	}

	.button, .toggle {
		.button();
		margin-left: 1px;
		margin-right: 1px;
	}
}

.hide-toolbar2 {
	display: flex;
	align-items: center;
	margin-top: 2px;
	margin-bottom: 2px;
	column-gap: 4px;
}

.tb-group {
	display: inline-flex;

	&.small > * {
		height: 18px;
		min-width: 18px;

		.icon {
			font-size: 10px;
		}
	}

	&.big > * {
		height: 30px;
		min-width: 30px;

		.icon {
			font-size: 16px;
		}
	}

	&> * {
		display:inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid @color-border;
		border-right-width: 0px;
		height: 26px;
		min-width: 26px;

		background: @color-tool-bg;

		box-shadow: 1px 1px 1px rgba(.0,.0,.0,.75);
		font-size: 12px;

		color: @color-text;

		.icon {
			font-size: 14px;
			&:before {
				text-shadow: 1px 1px 1px rgba(0,0,0,0.45);
			}
		}

		.label {
			font-family : Inter, serif;
			display: inline-block;
			margin-left: 6px;
			margin-right: 6px;
			user-select: none;
		}


		&:first-child {
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		&:last-child {
			border-right-width: 1px;
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}

		&.button2.transparent {
			opacity: 0.5;
		}

		&.button2:hover {
			border-color: @color-border-hover;
			background: @color-tool-bg-hover;
			opacity: 1.0;
		}

		&.button2:active, &.button2[checked], &.menu:active {
			background: @color-highlight-gray;
			opacity: 1.0;
		}

		&.menu {
			background: @color-menu-bg;
			min-width: 2px;
			&:hover {
				background: @color-menu-bg-highlight;
			}
		}

		&.menu:after {
			font-family: FontAwesome;
			content: "\f107";
			vertical-align: middle;
			margin-left: 2px;
			margin-right: 2px;
		}

		&.select {
			@select-width: 250px;

			>.icon {
				padding-left: 3px;
			}

			.header {
				display: inline-block;
				background-color: @color-menu-bg;
				border-radius: 2px;
				min-width: @select-width;
				padding: 2px;
				margin: 5px;
				cursor: pointer;

				.label {
					min-width: @select-width - 30px;
				}
			}

			.dropdown {
				position: absolute;
				top: 30px;
				left: 20px;
			}
		}
	}

}

.button() {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	user-select:none;
	border: 1px solid rgb(90,90,90);
	min-width : 20px;
	min-height : 20px;
	padding : 2px;
	text-align: center;
	border-radius: 1px;
	text-shadow: 1px 2px 2px black;
	background: -webkit-linear-gradient(top, rgb(90,90,90), rgb(50,50,50));
	cursor : pointer;
	font-size: 16px;
	vertical-align: middle;
	&:hover {
		color : white;
		border-color : white;
		background-color : #666;
	}
	label {
		font-size: 12px;
		margin-left: 6px;
		margin-right: 6px;
		text-shadow: none;
	}
	label.locked {
		color: #000;
		font-style: italic;
	}

	&.toggled {
		color : #ddd;
		background : #777;
		padding-top: 2px;
		padding-bottom: 1px;
		text-shadow: none;
		border-top-width: 2px;
		border-top-color: #444;
		&:hover {
			border-top-width: 1px;
			padding-top: 3px;
			border-top-color : white;
		}
	}
}

.hide-button, .hide-toggle {
	.button();
}

.link-container {
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;

	.link {
		flex: 1 0;
		align-self: center;
		width: 33%;
		margin-right: 33%;
		height: 100%;
		border-right: solid 1px gray;
	}

	.link-up {
		margin-top: 4px;
		margin-bottom: 2px;
		border-top: solid 1px gray;
	}

	.link-down {
		margin-top: 2px;
		margin-bottom: 4px;
		border-bottom: solid 1px gray;
	}

	.hide-button {
		min-width: 12px;
		min-height: 12px;
		width: 12px;
		height: 12px;
		font-size: 9px;
	}
}

.hide-button.change-button {
	font-size: 12px;
	min-height: 13px;
	min-width: 13px;
	height: 13px;
	width: 13px;
}

.button:active {
	padding-top: 3px;
	padding-bottom: 1px;
}

.hide-list {
	width : 100%;
	min-height : 200px;
	background-color : #111;
	border : 1px solid #444;
	overflow : auto;
}

.hide-block {
	padding : 5px;
	flex-grow: initial;
}

.hide-tabs {
	flex : 0 0 320px;
	position: relative;
	height: 100%;

	&.masked {
		& > * {
			display : none !important;
		}
		flex : none;
		position: absolute;
		height : 20px;
		width : 20px;
		right : 0px;
		>.maskToggle:before {
			content : "«";
		}
	}

	>.maskToggle {
		&:before {
			content : "»";
		}
		display : block !important;
		position : absolute;
		margin-top : -2px;
		right : 5px;
		color : #aaa;
		font-size: 24px;
		&:hover {
			color : white;
		}
	}

	.tabs-header {
		background-color : #111;
		padding : 2px;
		padding-bottom : 0px;
		&>div {
			cursor : pointer;
			display : inline-block;
			color: #888;
			background-color : #151515;
			padding : 3px 8px;
			border : 1px solid #444;
			margin-left : -1px;
			border-top-right-radius: 5px;
			user-select: none;
			&.active {
				background-color : #444;
				color : #bbb;
				border-bottom-color : #222;
				border-top-right-radius: 0px;
			}
			&.active:hover {
				background-color : #333;
			}
			&:hover {
				background-color : #282828;
			}
			&.hidden {
				display: none;
			}
		}
	}
	.tab {
		max-height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		position: absolute;
		&.expand {
			width: 100%;
			height: 100%;
		}
	}
}

.hide-tabs.tabs-bottom {
	>.tabs-header {
		width:100%;
		position: absolute;
		bottom : 0px;
		padding-top : 0px;
		padding-bottom : 5px;
		z-index: @header-layer;
		&>div {
			border-top : none;
			border-top-right-radius: 0;
			border-bottom-right-radius: 5px;
			&.active {
				border-radius: 0px;
			}
		}
	}
}

.search-box {
	position : fixed;
	display : flex;
	align-items: center;
	justify-content: center;
	top : 45px;
	right : 20px;
	z-index: @popup-layer;
	background-color : #262626;
	border : 1px solid #555;
	border-radius : 2px;
	padding : 5px 5px 5px 5px;
	color : #acacac;

	.btn {
		color: #acacac;
		cursor: pointer;
		margin: 0 5px 0 5px;
		font-size: 1.2em;

		&:hover {
			color: #dfdfdf;
		}
	}

	.buttons {
		margin-right: 10px;
	}

	.search-type {
		margin-left: 30px;
	}

	#results {
		width: 80px;
		margin: 0;
		margin-left: 5px;
		padding: 0;
	}

	.input-col {
		// float: left;
		text-align: center;
		input {
			display: block;
			width : 220px;
			background-color : #2e2e2e;
		}
		i {
			margin-top: 2px;
		}
	}
	i {
		cursor : pointer;
		margin-left : 5px;
		display : inline-block;
		font-size : 18px;
		color : #888;
	}
	i:hover {
		color : #EEE;
	}
	i.hidden {
		display: none;
	}
}

.tree > .search-box {
	position: sticky;
	float : right;
	top : 5px;
	right : 5px;
	width : 130px;
	input {
		width : 100px;
	}
}

/* Properties */
.props-column {
	height : 100%;
	background-color: #111;
	width: 320px;

	.hide-toolbar {
		width: 100%;
		vertical-align: middle;
	}
}

.hide-properties {
	//flex : 0 0 300px;
	padding:10px;
	overflow:auto;
	padding-bottom:80px;

	>h1.prefab-name {
		text-align: left;
		font-size: 10px;
		margin-bottom: 10px;
	}

	.section {
		margin-bottom : 10px;
		>h1 {
			font-size:12px;
			margin: 0px;
			cursor:pointer;
			user-select:none;
			width:100%;
			padding : 2px;
			padding-bottom: 0px;
			margin-bottom: 2px;
			background-color : #333;
			&:hover {
				background-color : #555;
			}
			&:before {
				content:"\25ba  ";
			}
		}
	}

	.section.open > h1:before {
		content:"\25bc  ";
	}

	.flex > input {
		flex: 1 1;
		min-width: 0;
	}

	dl {
		overflow-x:hidden;
		margin:0px;
	}

	dd, dt {
		vertical-align:middle;
		display:inline-block;
		text-wrap: wrap;
		word-break: break-word;
		margin-top:4px;
	}

	dt {
		width: calc(80px - var(--level) * 2%);
		text-align:right;
		font-size:11px;
		color:#aaa;
		user-select:none;
		text-transform: capitalize;
		cursor:pointer;
		font-weight: normal;
	}

	.override > dt {
		font-weight: bold;
	}

	.override > dt::before {
		display: inline-block;
		background-color: #fd002f;
		width:5px;
		height:12px;
		content: " ";
		margin-right: 5px;
	}

	input {
		width:190px;
	}

	input.small {
		width:170px;
	}

	input[type=number].small {
		width:35px;
	}

	input[type=checkbox] {
		width:13px;
	}

	.warning {
		color: red;
	}

	dt {
		input[type=button] {
			width: 100%;
			text-align: right;
			background: none;
			border: none;
			zoom: 1;
			font-size: 11px;
		}
	}

	select {
		width:197px;
	}

	dd {
		position:relative;
		width: calc(200px - var(--level) * 2%);
		margin-left:10px;
	}

	.texture-preview {
		pointer-events: none;
		display:inline-block;
		width : 15px;
		height: 15px;
		position : absolute;
		margin-left : -17px;
		margin-top : 2px;
	}

	dl dl {
		dt {
			width : 50px;
		}
		dd {
			width : 140px;
		}
		input[type=range] {
			width : 90px;
		}
		.hide-range input[type=text] {
			width : 30px;
		}
	}

	.group {
		--level: 0;
		width: calc(100% - var(--level) * 5%);
		margin: 0 auto;
		margin-top: 5px;

		>.title {
			@color: calc(25 + (var(--level) * 3));
			background-color : rgb(@color, @color, @color);
			text-align : center;
			cursor:pointer;
			user-select:none;
			padding : 1px;
			position: relative;
			input[type=button] {
				border: none;
				position : absolute;
				top : 0px;
				right : 0px;
				width : auto;
				padding : 1px 5px;
				background-color: rgb(40,40,40);
				&:hover {
					background-color: rgb(70,70,70);
				}
			}
			>.checkbox-wrapper {
				position: absolute;
				left: 5px;
			}
		}

		>.content {
			margin-bottom : 5px;

			.array {
				min-height: 5px;
				overflow-y: scroll;
				overflow-x: hidden;
				background: @color-menu-bg-highlight;
				max-height: 150px;
				padding: 3px;
				margin: 5px;
				margin-bottom: 0px;
				border-radius: 3px;

				&.disabled {
					filter: brightness(50%);

					* , ::after {
						cursor: not-allowed !important;
					}
				}

				.line {
					display: flex;
					align-items: center;
					margin-top: 1px;
					width: 100%;
					padding: 3px;
					border-radius: 3px;
					background: @color-tool-bg;

					.inclusion {
						display: flex;
						justify-content: center;
						width: 10px;
						margin: 0 5px 0 5px;
						padding: 2px 6px 2px 6px;
						background: red;
						color: black;
						font-weight: 900;
						border-radius: 5px;

						&:hover {
							cursor: pointer;
							filter: opacity(80%);
						}
					}

					input {
						margin-right: 5px;
					}

					input:not([type=checkbox]){
						flex: 1;
					}

					.remove {
						margin: 0 5px 0 5px;
						padding: 0 5px 0 5px;
						cursor: pointer;

						&:hover {
							filter: brightness(80%);
						}
					}
				}
			}
		}
	}

	.btn-list {
		* {
			margin-bottom: 5px;
		}
	}

	.error {
		color: red;
	}

	.vector {
		display: inline-flex;
		flex-direction: row;
		flex: 1;
		min-width: 0.9;

		input {
			min-width: 0;
		}
	}

	.checkboxs {
		* {
			margin-right: 5px;
		}
	}

	.btn-cdb-large {
		width : 16px;
		font-size : 14px;
		margin : 3px;
		opacity : 0.5;
	}

	.cdb-large {
		.cdb-obj-editor {
			max-height: 800px;
			overflow: auto;
			padding: 2px;
			background: #111;
			overflow-y: auto;
		}
		.btn-cdb-large {
			opacity: 1;
		}
	}

	#up-axis {
		display:flex;
		input {
			width:100%
		}
	}

	.select {
		>.icon {
			padding-left: 3px;
		}

		.header {
			display: inline-block;
			background-color: @color-menu-bg;
			border-radius: 2px;
			border: solid 1px #444;
			padding: 2px;
			cursor: pointer;
			width: 192px;

			>span {
				padding-left: 5px;
				width: 90% !important;
			}
		}

		.dropdown {
			position: absolute;
			top: 30px;
			left: 200px;
		}
	}
}
/* Image Viewer */
@imgPanelWidht : 320px;
.image-properties {
	height : 100%;
	background-color: #111;
	width: @imgPanelWidht;

	.title {
		text-align: center;
		font-size: 12px;
		margin: 4px;
		background-color : rgb(30,30,30);
	}

	.preview-btns {
		display:flex;
		flex-direction: row;

		input[type="button"] {
			flex: 1;
			margin: 5px 5px 5px 5px;
		}
	}

	.reset-compression {
		outline: 2px solid #fd5151;
		width: 95%;
		margin-left: 2.5%;
	}

	.compression-infos {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;

		p {
			margin: 0px 0px 0px 5px;
			font-weight: bold;
			text-align: center;
		}
	}

	.field {
		margin: 5px 5px 0px 50px;
		display: flex;
    	flex-direction: row;

		&.alpha {
			margin: 5px 5px 5px 80px;

			label {
				flex: 1;
				flex-shrink: 0;
				white-space: nowrap;
			}

			input[type="checkbox"]{
				margin-right: 5px;
			}

			input[type="number"]{
				flex: 1;

				&:disabled {
					pointer-events: none;
					background-color: #111111;
					color: #757575;
				}
			}
		}

		label {
			margin-right: 4px;
		}

		.size {
			width: 50px;
			margin-right: 5px;
		}

		select, input[type="text"] {
			flex-grow: 1;
		}
	}
}

.identifiers {
	position: absolute;
	left: 0;
	right: @imgPanelWidht;
	bottom: 50px;

	label {
		position: absolute;
		color: white;
		font-weight: bold;
		font-size: 30px;
	}

	:nth-child(1) {
		left: 20px;
	}

	:nth-child(2) {
		right:20px;
	}
}

/* Curve editor */
@timelineHeight: 20px;
.hide-curve-editor {
	position: relative;
	background-color: #303030;

	.timeline {
		background: #161616;
		fill: #161616;
		position: relative;
		height: @timelineHeight;
		overflow: hidden;

		.tlgroup .mark {
			height: 100%;
			color: #8e8e8e;
			border-left: 1px solid #8e8e8e;
			vertical-align: middle;
			padding-left: 4px;
			position: absolute;
			line-height: @timelineHeight;
			user-select: none;
		}
	}

	.overlaygroup {
		pointer-events: none;
	}

	text {
		font: 10px sans-serif; fill: #8d8d8d;
	}

	&:focus {
		//background-color: rgba(0, 0, 0, 0.219);
		outline: none;
	}
	.keyPopup {
		padding: 4px;
		padding-bottom: 2px;
		background-color: #151515;
		position: absolute;
		.line {
			margin-bottom: 2px;
		}
		label {
			width: 60px;
			display: inline-block;
		}
		input { width: 80px; }
	}
	svg {
		@selectCol: rgb(255, 255, 255);
		@previewCol: rgb(192, 111, 6);
		@lineCol: rgb(255, 31, 31);
		border-right: 1px solid black;

		line {
			stroke-width: 1px;
		}

		.grid {
			line {
				shape-rendering: crispEdges;
			}
			.hgrid line { stroke: #181818; }
			.hgrid .interline { stroke: #1e1e1e; opacity: 0.2; }
			.vgrid line { stroke: #181818; }
			.vgrid .interline { stroke: #1e1e1e; opacity: 0.2; }
			line.axis {
				stroke: rgb(116, 116, 116);
				shape-rendering: crispEdges;
			}
			text {
				font: 10px sans-serif; fill: #8d8d8d;
			}
		}

		.graph {

			.selection rect {
				fill: @selectCol;
				fill-opacity: 0.1;
				stroke: rgb(255, 255, 255);
				opacity: 0.3;
				mix-blend-mode: screen;
				cursor:move;
			}

			.curve line, path {
				stroke: @lineCol;
				stroke-width: 1px;
				fill: none;
			}

			.vectors {
				line {
					stroke: rgba(207, 207, 207, 0.603);
				}

				line.selected {
					stroke: @selectCol;
				}
			}

			.handles {
				circle, rect {
					fill: rgba(187, 187, 187, 0.644);
					cursor: pointer;
				}
				circle:hover:not(.no-hover), rect:hover {
					fill: #fff;
					stroke: #fff;
					stroke-width: 2px;
				}
				circle.selected, circle:hover.selected, rect.selected, rect:hover.selected {
					fill: @selectCol;
				}
				rect.preview {
					fill: @previewCol;
				}
			}
		}

		.selection-overlay rect {
			mix-blend-mode: multiply;
			fill: #888;
			fill-opacity: 20px;
			stroke: #000;
			opacity: 50%;
		}
	}
}

/* FX Editor */

.fx-script {
	height: 500px;
	width : 500px;
}

.fx-scriptParams {
	margin : 10px;

	.slider {
		margin : 10px;
	}

	.checkbox {
		margin : 10px;
	}

	input[type=checkbox] {
		display: inline-block;
   		float: none;
	}
}

.fx-animpanel {
	@leftPanelWidth: 200px;
	min-height: 120px;
	max-height: 800px;
	position: relative;
	display: flex;
    flex-direction: row;

	.help-button
	{
		position: absolute;
		left: 5px;
		bottom: 5px;
		border-color: #3d3d3d;
		background: #545454;
		border-right-width: 1px;
		border-radius: 4px;
		box-shadow: 1px 1px 1px rgba(.0,.0,.0,.75);
		padding: 5px 8px 5px 8px;
	}

	.left-fx-animpanel
	{
		margin-top: @timelineHeight;
		min-width: @leftPanelWidth;
		max-width: 700px;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.right-fx-animpanel
	{
		overflow: hidden;
		height:100%;
		flex: 1;

		.overview {
			background: #161616;
			fill: #303030;
			position: relative;

			.overview-selection {
				fill: #17ffeb12;
				stroke: #000000;
				stroke-width: 1px;
				pointer-events: all;
				cursor: move;
			}
		}
	}

	.events {
		.event {
			stroke:rgba(255,255,255,1.0);
			fill: rgba(255,255,255,0.25);
			user-select: none;
		}

		.event-move {
			//fill: rgba(255,0,0,0.50);
			fill: none;
			pointer-events: all;
			cursor: move;
		}

		.event-resize {
			//fill: rgba(0,255,0,0.50);
			fill: none;
			pointer-events: all;
			cursor: e-resize;
		}

		.event.subFX {
			fill: #1b3673;
		}

		.event:hover {
			stroke: white;
		}

		.event-key {
			stroke: rgba(255,255,255,1.0);
			stroke-width: 1px;
			fill: black;
		}

		.event-label {
			div {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				.event-label {
					box-sizing: border-box;
					display: block;
					flex-grow: 0;
					border-radius: 3px;
					background-color: rgba(33,33,33,0.75);
					padding:  0px 0.25em;
					border: 1px solid #666;
					font-size: 8pt;
					color: white;
					white-space: nowrap;
				}
			}
		}

		text {
			pointer-events: none;
			font-family: var(--default-font), serif;
		}

		g.selected {
			.event, .event-key {
				stroke: rgba(114, 180, 255, 1.0);
			}

			.event-label span {
				border-color: rgba(114, 180, 255, 1.0);
			}
		}
	}

	.key-event {
		fill: rgba(187, 187, 187, 0.644);
		stroke: #000000;
		stroke-width: 1px;
		cursor: pointer;
	}

	.key-event:hover {
		fill: #ffd967;
	}
	.key-event.selected, .key-event:hover.selected {
		fill: #ffbe33;
	}

	text {
		font: 10px sans-serif; fill: #8d8d8d;
	}

	.overlay-container {
		top: 0;
		position: absolute;
		height: 100%;
		pointer-events: none;
		left: @leftPanelWidth;
		right: 0px;
		.overlay {
			position: absolute;
			top: 0px;
			width: 100%;
			height: 100%;
			overflow: hidden;
			.time-marker {
				position: absolute;
				height: 100%;
				width: 1px;
				background: green;
			}
			.marker {
				position: absolute;
				height: 100%;
				width: 1px;
				background: #907a00;
			}
			.selection {
				position: absolute;
				height: 100%;
				background: #17ffeb12;
				mix-blend-mode: hard-light;
				pointer-events: all;
				cursor: move;
			}
			.selection-left, .selection-right {
				cursor: ew-resize;
				pointer-events: all;
				width: 4px;
				background: #00000036;
				position: absolute;
				height: 100%;
			}
			.selection-left {
				border-right: 1px dashed black;
			}
			.selection-right {
				border-left: 1px dashed black;
			}
			.preview {
				position: absolute;
				height: @timelineHeight;
				background: rgba(255, 255, 255, 0.1);
				opacity: 0.9;
				mix-blend-mode: screen;
				border-left: 1px black;
				border-right: 1px black;
			}
			.preview-left {
				background: rgba(0, 0, 0, 0.3);
				border-right:1px dashed rgb(121, 121, 121);
				position: absolute;
				height: 100%;
			}
			.preview-right {
				background: rgba(0, 0, 0, 0.3);
				border-left:1px dashed rgb(121, 121, 121);
				position: absolute;
				height: 100%;
			}
		}
	}

	.tracks-header {
		position: relative;
		background: #4a4a4a;
		text-align: left;
		white-space: nowrap;

		.name {
			padding: 1px;
			padding-left: 5px;
			padding-right: 5px;
		}
		.abspath {
			position: relative;
			opacity: 0.5;
		}

		:first-child.track-button {
			padding-left: 10px;
		}

		:nth-last-child(1).track-button {
			position:absolute;
			right:5px;
			top:2px;
		}

		:nth-last-child(2).track-button {
			position:absolute;
			right:25px;
			top:2px;
		}

		.track-button {
			padding-left: 2px;

			&:hover {
				color: white;
			}
		}

		&.hidden {
			display: none;
		}
	}

	.track-header {
		position: relative;
		background: #1b1b1b;
		text-align: left;

		&.hidden {
			display: none;
		}

		.name {
			padding: 1px;
			padding-left: 5px;
			padding-right: 5px;
		}

		.abspath {
			position: absolute;
			opacity: 0.5;
			left: 200px;
		}

		:first-child.track-button {
			padding-left: 10px;
		}

		:nth-last-child(1).track-button {
			position:absolute;
			right:5px;
			top:2px;
		}

		:nth-last-child(2).track-button {
			position:absolute;
			right:25px;
			top:2px;
		}

		.track-button {
			padding-left: 2px;

			&:hover {
				color: white;
			}

			&.visibility {
				padding-left:17px;
			}

			&.color-id {
				padding: 0 0 0 0;
				position: absolute;
				left:2px;
				top:2px;
				bottom: 2px;
				width:7px;
			}
		}

		&.hidden {
			display: none;
		}
	}

	.track {
		min-height: 20px;
		display: flex;
		user-select: none;

		.track-prop {
			cursor: pointer;
			text-align: right;
			width: @leftPanelWidth;
			height: 100%;

			label {
				vertical-align: middle;
				padding-right: 4px;
			}

			.track-toggle {
				width: 16px;
				height: 16px;
				display: inline-block;
				text-align: center;
			}
			&:hover {
				background: rgba(0, 0, 0, 0.438);
			}
		}

		&.hidden {
			display: none;
		}

		.curve {
			margin-left: @leftPanelWidth;
			position: relative;
			box-shadow: 0px -1px 0px black inset;
		}
		.curves.hidden {
			display: none;
		}
	}
}

/* Poly editor */
.poly-editor{
	.editModeButton{
		margin: 10px;
		outline: 4px solid #fd5151;
	}
	.editModeEnabled {
		outline: 4px solid #5897fb;
	}
	.description{
		margin: 5px;
		background-color:#303030;
		outline: 4px solid #4a4a4a;
		padding : 2px;
	}
	.point-list {
		input {
			width: 70px;
		}
		.deletePoint {
			width: 20px;
			margin-left: 8px;
		}
	}
	.poly-vector2{
		display: block;
		padding : 5px;
	}

	input[type=button] {
		margin-top: 5px;
	}
}

// Array of string
.string-array {
	.array-element {
		display: block;
		padding: 5px;
	}
	.string-field {
		width: 120px;
	}
	.delete-button {
		width: 20px;
		margin-left: 8px;
	}
}

// Default Edit Button
.editModeButton{
	margin: 10px;
	outline: 4px solid #fd5151;
}
.editModeEnabled {
	outline: 4px solid #5897fb;
}

/* Mesh Generator */
.meshGenerator-thumbnail {
	display: inline-block;
	margin: 5px;
	@size: 75px;
	width: @size;
	height: @size;
	background-size: @size @size;
	outline: 2px solid #4a4a4a;
	background-size: contain;
}

/* Terrain editor */
.terrain-brushModeDescription{
	margin: 5px;
	background-color: black;
	outline: 4px solid #4a4a4a;
	padding : 2px;
}

.terrain-brushModeContainer{
	padding : 1px;
}

.terrain-brushMode{
	padding : 5px;
	display: inline-block;
	.selected {
		outline: 4px solid #5897fb;
	}
}

.terrain-brushModeIcon {
	@size: 40px;
	width: @size;
	height: @size;
	background-size: @size @size;
	background-color: #AAAAAA;
	outline: 4px solid #4a4a4a;
	background-size: contain;
}

.terrain-brushes {
	.brush {
		display: inline-block;
		padding : 6px;
		position: relative;
	}
	.brush-preview {
		@size: 40px;
		background-size: @size @size;
		width: @size;
		height: @size;
		outline: 4px solid #4a4a4a;
	}
	.brush-preview-selected {
		@size: 45px;
		background-size: @size @size;
		width: @size;
		height: @size;
		outline: 4px solid #5897fb;
	}
	.tooltiptext {
		visibility: hidden;
		background-color: black;
		color: #fff;
		text-align: left;
		border-radius: 6px;
		position: absolute;
		z-index: @tooltip-layer;
		padding: 4px;
		width: 90px;
	}
	.brush:hover .tooltiptext {
		visibility: visible;
	}
}

.terrain-surfaces {
	.surface {
		display: inline-block;
		padding : 6px;
		position: relative;
	}
	.surface-preview {
		@size: 85px;
		background-size: @size @size;
		width: @size;
		height: @size;
		outline: 4px solid #4a4a4a;
	}
	.surface-preview-selected {
		@size: 85px;
		background-size: @size @size;
		width: @size;
		height: @size;
		outline: 4px solid #5897fb;
	}
	.tooltiptext {
		visibility: hidden;
		background-color: black;
		color: #fff;
		text-align: left;
		border-radius: 6px;
		position: absolute;
		z-index: @tooltip-layer;
		padding: 4px;
	}
	.surface:hover .tooltiptext {
		visibility: visible;
	}
}

/* Shader Editor */
.shader-editor {

	display: flex;
	flex-direction: row;

	/** {
		font-family: "Inter";
	}*/

	#preview {
		z-index: 3;
		position: absolute;

		background-color: #111;
		border: 1px solid #444;

		right: 16px;
		bottom: 16px;

		.hide-toolbar2 {
			position: absolute;
			right: 8px;
			top: 8px;
		}

		display: flex;
		align-items: center;
		justify-items: center;

		.scene-container {
			width: 100%;
			height: 100%;
		}

		.resize-handle {
			--size: 5px;

			position: absolute;

			background-color: transparent;

			&:hover {
				background-color: rgba(114, 180, 255, 0.5);
			}

			&.up {
				left: 0px;
				right: 0px;
				top: 0px;
				height: var(--size);

				&:hover {
					cursor: n-resize;
				}
			}

			&.up-left {
				left: 0;
				top: 0;
				height: calc(var(--size) * 2);
				width: calc(var(--size) * 2);

				&:hover {
					cursor: nw-resize;
				}
			}

			&.left {
				left: 0px;
				top: 0px;
				bottom: 0px;
				width: var(--size);

				&:hover {
					cursor: e-resize;
				}
			}
		}
	}

	.flex.vertical {
		position:relative;
	}

	#rightPanel {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		min-width: 270px;

		padding-top: 10px;
		border-left: 1px solid #444444;
    	background: #222222;
		height: 100%;
		user-select: none;

		span { // title
			margin-left: 5px;
			font-size: 15px;
			font-weight: bold;
		}

		.flexible {
			overflow: auto;
			min-height: 0;



			to-collapse {
				display: contents;
			}

			&.collapsed {
				flex-grow: 0;
				overflow: visible;
				to-collapse {
					display: none;
				}

				h1 .ico {
					transform: rotate(-90deg);
				}
				min-height: unset;
			}
		}

		.hide-block {
			flex: 1;
			display: flex;
			flex-direction: column;

			.parameters, .variables {
				fancy-item-header {
					.type {
						font-style: italic;
					}
				}

				.content .values {
					display: flex;
					flex-direction: column;
				}
			}
		}
		.options-block {
			flex: 0;
			& > * {
				display: block;
				margin-bottom: 10px;
				width: 100%;
				text-align: center;
				box-sizing: border-box;
			}

			& > div {
				border: 1px solid #444;
				padding: 2px;
			}
		}
	}
}

/* Texture Editor */
.texture-editor {
	display: flex;
	flex-direction: row;

	.flex.vertical {
		position:relative;
	}

	#right-panel {
		flex: 0;
		display: flex;
		flex-direction: column;
		min-width: 270px;

		width: 280px;
		border-left: 1px solid #444444;
    	background: #222222;
		height: 100%;
		user-select: none;

		.group {
			.header {
				display: flex;
				background-color: #444444;
				padding: 5px;

				&:hover {
					background-color: #666666;
				}

				.title {
					text-transform: uppercase;
					font-weight: bold;
					margin-left: 7px;
					font-family: var(--default-font), serif;
					font-size: 9pt;
					color: #aaa;
				}
			}

			.content {
				display: block;
				padding: 10px 20px 10px 20px;

				.title {
					font-weight: bold;
					font-family: var(--default-font), serif;
					font-size: 9pt;
					color: #aaa;
					margin: 0 0 5px 0;
				}

				.fields {
					display: grid;
					grid-template-columns: auto auto;
					gap: 5px 5px;
					padding-bottom: 10px;
					border-bottom: 1px solid;
					margin-bottom: 10px;
					border-color: #373737;

					&.grid-3 {
						grid-template-columns: auto auto 2%;
					}

					.reset {
						&:hover {
							color: #ffffff;
						}

						padding-top: 3px;
					}
				}
			}
		}
	}

	#tex-preview {
		z-index: 3;
		position: absolute;

		width: 300px;
		height: 300px;

		background-color: #111;
		border: 1px solid #444;

		right: 35px;
		bottom: 35px;

		.hide-toolbar2 {
			position: absolute;
			right: 8px;
			top: 8px;
		}
	}
}

.graph-view {
	outline: none !important;
	position: relative;

	.heaps-scene>.hide-toolbar2 {
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 999;
	}

	.mini-preview {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 0;
	}

	#graph-root {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 1;
	}

	#add-menu {
		position: absolute;
		width: 400px;
		box-shadow: 0px 0px 25px -4px black;

		background-color: rgb(34, 34, 34);
		border: 1px solid #444;
		z-index: @default-layer + 10;

		.search-container {
			display: flex;

			.icon {
				width: 16px;
				font-size: 15px;
				text-align: center;
				padding: 7px;
				border: solid #444;
				background: #2d2d2d;
				border-width: 0 1px 1px 0;
			}

			.search-bar {
				flex: 1;
				margin: -1px 11px 0px -1px;

				input {
					width: 100%;
					height: 30px;
					padding-left: 10px;
					outline: none;

					&:focus {
						border: 1px solid #888888;
					}
				}
			}
		}
		#results {
			max-height: 300px;

    		overflow-y: auto;
			div {
				padding: 5px;
				border-top: 1px solid #444444;
				cursor: pointer;
				color: #d4d4d4;

				& {
					position: relative;
				}

				&.group {
					background: #474747;
					color: #c0c0c0;
					cursor: default;
					z-index: @default-layer + 5;
    				box-shadow: 0px 0px 34px -9px black;

					&:hover {
						background: #474747!important;
						color: #dadada!important;
						box-shadow: none;
					}
				}

				& > span:first-child {
					font-weight: bold;
					padding-left: 10px;
				}
				& > span:last-child {
					font-style: oblique;
					padding-left: 7px;
				}
				&:first-child {
					border-top: 0;
				}
				&:hover, &.selected {
					background: #5eb7bf;
					color: #000000;
					box-shadow: inset 0px 0px 12px -1px black;
					z-index: @default-layer + 15;
				}
			}
		}

	}
	#context-menu {
		position: absolute;
		width: 150px;
		box-shadow: 0px 0px 25px -4px black;

		background-color: rgb(34, 34, 34);
		border: 1px solid #444;

		z-index: @default-layer + 10;

		#options {
			max-height: 300px;

    		overflow-y: auto;
			div {
				padding: 5px;
				border-top: 1px solid #444444;
				cursor: pointer;
				color: #d4d4d4;

				& {
					position: relative;
				}

				&.group {
					background: #474747;
					color: #c0c0c0;
					cursor: default;
					z-index: @default-layer + 15;
    				box-shadow: 0px 0px 34px -9px black;

					&:hover {
						background: #474747!important;
						color: #dadada!important;
						box-shadow: none;
					}
				}

				& > span:first-child {
					font-weight: bold;
					padding-left: 10px;
				}
				& > span:last-child {
					font-style: oblique;
					padding-left: 7px;
				}
				&:first-child {
					border-top: 0;
				}
				&:hover, &.selected {
					background: #5eb7bf;
					color: #000000;
					box-shadow: inset 0px 0px 12px -1px black!important;
					z-index: @default-layer + 15;
				}
				&.grey-item {
					background: #adadad;
					color: #000000;
					font-weight: bold;
					box-shadow: inset 0px 0px 5px -1px black;
				}
			}
		}

	}

	.heaps-scene {
		outline: none !important;
		svg {

			font-family: var(--default-font);

			foreignObject {

				.container {
					padding: 1px;

					input {
						display: block;
						box-sizing: border-box;
						font-size: 8pt;
						font-family: var(--default-font);
						padding: 0px 2px 0px 2px;
						text-align: right;
						border: none;
						outline: 1px solid #393939;
						width: 100%;
						height: 100%;

						&:hover {
							outline-color: rgba(114, 180, 255, 0.5);
						}
					}
				}


			}

			g {
				&.box {
					pointer-events: all;

					foreignObject {

						input-wrapper {
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							justify-items: center;
							> * {
								flex-grow: 1;
							}
							input {
								width: 100%;
								min-width: 0;
								box-sizing: border-box;
								text-overflow:ellipsis;
								white-space:nowrap;
								overflow:hidden;
								text-align: end;
								direction: rtl;
								font-size: 10pt;
							}

							box-sizing: border-box;

							padding-left: 8px;
							padding-right: 8px;
						}



						container {
							display: flex;
							align-items: center;
							justify-content: center;

							width: 100%;
							height: 100%;

							.play-button {
								background-color: transparent;
								border-width: 0;
								font-family: inherit;
								font-size: inherit;
								font-style: inherit;
								font-weight: inherit;
								line-height: inherit;
								padding: 0;

								color: #888;
								&.active {
									color: #FFF;

									&:hover {
										color: #CCC;
									}
								}

								&:hover {
									color: #AAA;
								}
							}
						}
					}

					&.comment {
						.head-box {
							fill: rgba(80,80,80,0.5);
							//stroke-width: 3;
							pointer-events: all;
						}

						.resize {
							pointer-events: all;
						}

						.outline {
							stroke: rgba(80,80,80,0.5);
							stroke-width: 3;
						}

						foreignObject {
							pointer-events: all;
						}

						pointer-events: none;
					}

					&.selected {
						.outline {
							stroke: #668fff;
						}
					}
				}
			}

			.outline {
				fill: none;
			}

			.background {
				fill: #393939;
			}

			.separator {
				stroke: #272727;
				stroke-width: 1px;
			}

			.resize {
				fill: rgba(0, 0, 0, 0.0);
				stroke: none;
			}

			.comment-title {
				display: inline-block;
				max-width: calc(100% - 30px);
				min-width: 20px;
				height: 100%;
				font-size: 2em;
				background: rgba(0,0,0,0);
				border: none;
				overflow-x: hidden;
				text-wrap: nowrap;
				br {
					display: none;
				}
			}

			// .head-box {
			// 	fill: #155358;
			// }

			.title-box {
				text-anchor: start;
				fill: #c3c3c3;
				stroke: none;
				user-select: none;
				&::selection {
					background: none;
				}
			}

			// .nodes, .properties {
			// 	fill: #737373;
			// 	opacity: 0.75;
			// }

			.hasLink {
				.input-field {
					display: none;
				}
			}

			.close-preview {
				text-align: center;
				cursor: pointer;
				color: #999;

				&:hover {
					//background-color: rgba(.0,.0,.0,.25);
					color: #FFF;
				}
			}

			.input-node, .output-node {
				fill: rgb(200, 200, 200);
				//stroke-width: 13px;
				//stroke-opacity: 0;

				&.nodeMatch {
					fill: #5ca4ab;
				}

				.hitbox {
					fill: transparent;
					&:hover {
						fill: rgba(114, 180, 255, 0.5);
					}
				}
			}

			.title-node {
				fill: #c3c3c3;
				stroke: none;
				user-select: none;
				&::selection {
					background: none;
				}
			}

			.properties-group {
				span {
					color: #ffffff;
					user-select: none;
					&::selection {
						background: none;
					}
				}
				input[type=text], select {
					width: 100%;
				}
				input[type=text].error {
					border: red 1px solid;
				}

				.texture-preview {
					background-size: 50px 50px;
					height: 50px;
					width: 50px;
					margin: auto;
					margin-bottom: 5px;
				}

				.color-preview {
					background-size: 25px 25px;
					height: 25px;
					width: 25px;
					margin: auto;
					margin-bottom: 5px;
				}

				.float-preview {
					background: #222222;
					font-weight: bold;
					width: fit-content;
					padding: 2px 3px;
					margin: auto;
					margin-bottom: 3px;
					user-select: none;
				}

				.preview-parent {
					position: absolute;
					height: 100px;
					width: 100px;
				}

				.propertySubShader {
					span {
						float: left;
						margin-right: 10px;
					}
				}

				.custom-var {
					display: table;
					width: 100%;
					div.custom-var-row {
						display: table-row;
						label, span {
							display: table-cell;
						}
					}
				}
			}

			.edge {
				stroke-width: 2;
				stroke: rgb(200, 200, 200);
				fill: transparent;
				pointer-events: stroke;

				&.hitbox {
					stroke-width: 10;
					stroke: transparent;
					&:hover {
						stroke: rgba(114, 180, 255, 0.5);
					}
				}
			}

			.rect-selection {
				stroke: rgba(0, 0, 255, 0.7);
				fill: rgba(70, 70, 116, 0.08);
			}

			.node-id-indicator {
				fill: #ffffff;
				stroke: none;
				font-size: 8px;
			}
		}

		#add-menu {
			font-family: var(--default-font);
		}
	}
	.paramVisible {
		color: black!important;
		font-weight: bold;
		font-style: italic;
		letter-spacing: -.5px;
		text-align: center;
		user-select: none;
	}
}

/* Golden Layout Fixes */

.lm_header .lm_tabs {
	z-index : @default-layer;
}

.lm_dropTargetIndicator {
	box-shadow : none;
}
span.lm_title { display: inline-block; padding: 0px 10px; }
li.lm_tab { padding-left: 0px !important; padding-right: 15px !important; }
div.lm_close_tab { top : 0px !important; right : 0px !important; width : 15px !important; height : 18px !important; }
div.lm_close_tab:hover { background-color : #555 !important; }

body.hide-subview {
	.lm_header .lm_tab {
		padding-right: 10px;
	}
	.lm_close_tab, .lm_controls {
		display : none;
	}
}

.lm_header .lm_tabdropdown_list .lm_tab {
	width: 100%;
}

.lm_header .lm_tabdropdown_list .lm_tab .lm_title {
	width: unset;
	max-width: 500px;
}

.visibility-toggle, .visibility-large-toggle {
	position: absolute;
	right: 4px;
	padding: 4px;

	&:hover {
		color : white;
		background: black;
	}
}
.hidden {
	.visibility-toggle, .visibility-large-toggle {
		background: #0000008a;
		i {
			color: #555;
		}
	}
}

.visibility-large-toggle {
	font-size: 14px!important;
}

.lock-toggle, .lock-large-toggle {
	position: absolute;
	right: 24px;
	padding: 4px;
}
.locked {
	.lock-toggle, .lock-large-toggle {
		i {
			color: #555;
		}
	}
}

.lock-large-toggle {
	font-size: 14px!important;
}

/* Spectrum Color picker */

div.sp-replacer {
	vertical-align:top;
	background-color : #444;
	border : 1px solid #666;
	height : 16px;
	margin-right:5px;
	.sp-preview {
		width: 14px;
		height: 14px;
	}
	.sp-dd {
		padding-top:0px;
	}
	&:hover {
		border-color : white;
	}
	&.sp-active {
		border-color: #888;
	}
}

div.sp-container {
	background-color : #444;
	border : 1px solid #666;
	.sp-picker-container {
		border:none;
		width: 300px;
	}
	.sp-color {
		right: 8%;
	}
	.sp-hue {
		left: 95%;
	}
	input {
		color: #aaa;
		background-color : rgb(34,34,34);
		border-radius:0px;
		&:hover {
			border-color:white;
		}
	}
}

/* Animation Event Editor */
.event-editor {
	.title {
		text-align: center;
		font-weight: bold;
		font-size: 12px;
		margin: 4px;
		background-color : rgb(30,30,30);
	}
	.event {
		.label {
			text-align: center;
			display: inline-block;
			width: 50%;
		}
	}
}

/* Script Editor */

.codeeditor {
	position: relative;

	.codeErrorLine {
		background: #400;
	}
	.codeErrorContentLine {
		background : rgba(255,0,0,0.1);
	}
	.codeErrorContent {
		text-decoration: underline dashed red;
	}
	.codeErrorMessage {
		position: absolute;
		bottom: 0;
		right: 0;
		background : rgba(80, 5, 5, 1);
		color : red;
		padding: 2px;
		border: 1px solid #A00;
		max-height: 200px;
		max-width: 400px;
		overflow: hidden;
	}
}

.script-editor {
	.codeeditor {
		height: 100%;
	}
	div.codeErrorMessage {
		right : 12px;
		bottom : 0px;
		padding : 5px;
	}
}

/* Domkit */

.domkit {
	width:100%;
	height:100%;
	display:flex;
	>* {
		flex-grow : 100;
	}
	.leftpanel {
		width:600px;
		resize:horizontal;
		border-right:1px solid #333;
		overflow:hidden;
		.html {
			.codeeditor {
				padding: 5px;
				height: 400px;
			}
		}
		.cssErrors {
			background : #840;
			border : 1px solid #F80;
			color : #F80;
			padding : 10px;
			position: absolute;
			z-index: @domkit-layer;
			left : 10px;
			bottom : 10px;
		}
	}
}


/* Level 3D */
.overlay-info {
	background: #000000e0;
	position: absolute;
	z-index: @default-layer;
	left : 0px;
	bottom : 0px;
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 10px;
	max-height: 800px;
    min-width: 600px;
}

.context-menu-item {
	.contextmenu-keys {
		float: right;
		font-size: 8pt;
		color: #8d8d8d;
		&:before {
			content: '\a0'; // ' '
		}
	}
	&.context-menu-disabled {
		.contextmenu-keys {
			color: #c9c9c9;
		}
	}

	.tag-disp-expand {
		display: flex;
		.tag-disp {
			color: white;
			flex-grow: 1;
			padding: 2px;
		}
	}

	&.context-menu-input {
		input[type=checkbox] {
			top: auto !important;
			&:after {
				// background-color: rgb(165, 165, 165);
				background-color: white;
				color: black;
				box-shadow: none;
				border: 1px solid black;
				border-radius: 2px;
			}
		}
	}
}

.checkerboard-bg {
	background: conic-gradient(#EEE 90deg,#DDD 90deg 180deg,#EEE 180deg 270deg, #DDD 270deg);
	background-size: 16px 16px;
	background-repeat: repeat;
}

div.color-box {
	display: inline-flex;
	cursor: pointer;
}


div.popup {
	inset: unset;

	background-color : #181818;
	border : 1px solid #242424;
	border-radius: 5px;

	color: #d8d8d8;

	position: absolute;
	overflow: visible;
	z-index: 900;

	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);

	&:focus {
		outline: none;
	}

	padding: 6px;
}

.settings-popup {
	padding: 8px;

	p {
		margin-top: 0;
		margin-bottom: 0;
		text-align: center;
	}

	h2 {
		margin-top: 0.5em;
		margin-bottom: 0;
		text-align: left;
		font-size: 1em;
		font-weight: normal;
	}

	select {
		width: auto;
		width: fit-content;
    	margin-left: 2px;
	}

	.form-grid {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;

		input[type="radio"] {
			padding-bottom: 4px;
		}

		grid-row-gap: 2px;
	}

	label {
		text-align: right;
		padding-right: 8px;
	}

	label.left {
		text-align: left;
		padding-left: 8px;
	}

	.hide-grid {
		visibility: hidden;
		height: 0px;
	}

	input[type=checkbox] {
		appearance: none;
		margin: 0;
		background: #545454;
		font: inherit;
		width: 14px;
		height: 14px;
		border: 1px solid #3d3d3d;
		border-radius: 3px;
		transform: translateY(-0.075em);
		padding: 0;
		/*box-shadow: 0px 1px #181818;*/
	  }

	  input[type=checkbox]:checked{
		background: #4772b3;
	  }

	  input[type=checkbox]:checked:after {
		content: '\2714';
		position: absolute;
		text-align: center;
		vertical-align: middle;
		width: 12px;
		height: 11px;
		left: auto;
		top: auto;
		box-shadow: none;
		background: none;
		line-height: 12px;
		font-size: 0.7em;
		color: #f6f8fb;
	  }

	  input[type=checkbox]:after {
		content: none;
	  }
}

div.color-picker {
	padding:0;

	text-align: left;

	.vbox {
		display: flex;
		flex-direction: column;
	}

	.slider-value {
		display: flex;

		input {
			font-size: 10px;
		}

		label {
			align-self: center;
		}
	}

	hr {
		border: 1px solid #444444;
		width: 100%;
	}

	.slider-container {
		display: flex;
	}

	.slider {
		position: relative;
		display: inline-block;
	}

	.info-bar {
		display: flex;
	}

	.toolbar {
		vertical-align: top;
	}

	canvas {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	svg {
		position: absolute;
		width: 100%;
		height: 100;
		pointer-events: none;
	}
}


div.texture-choice {
	display: inline-flex;
	height: 26px;
	align-items: center;
	width: 100%;
}

div.gradient-box {
	display: block;
	align-self: center;
	height: 18px;
	min-width: 150px;

	font-family: Verdana, serif;
    font-size: 9pt;

	border: 1px solid #444;

	cursor: pointer;
}

.gradient-editor {
	background-color : rgb(40, 40, 41);
	border : 1px solid rgb(51, 51, 51);

	display: flex;


	.color-box {
		border : 3px solid rgb(51, 51, 51);
	}

	.stop-editor {
		&.disabled {
			opacity: 50%;
		}
	}

	.editor {
		padding: 6px;
		& > div{
			margin-bottom: 4px;
		}
	}

	p {
		margin: 0;
	}

	label {
		margin-right: 5px;
	}
	input {
		width: 75px;
	}

	summary:focus {
		outline: none;
	}

	#preview {
		width: 256px;
		height: 256px;
	}
}

.gradient-container {
	height: 100%;
	position: relative;

	svg {
		position: absolute;
		width: 100%;
		height: 100;

		&.lines {
			mix-blend-mode: difference;

			line {
				stroke: white;
				stroke-width: 1px;
			}
		}

		.gradient-stop {
			.outline {
				stroke-width: 0.015;
				stroke: white;
			}

			&:hover{
				.outline {
					stroke-width: 0.025;
				}
			}

			&.selected {
				.outline {
					stroke-width: 0.035;
				}
			}

			&.selected:hover {
				.outline {
					stroke-width: 0.045;
				}
			}

			.fill {
				stroke: black;
				stroke-width: 0.005;
			}
		}
		//pointer-events: none;
	}
}

.gradient-preview {
	width:100%;
	height: 100%;
	position: absolute;
}

.search-bar {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 8px;
	border-radius: 3px;
}

.lesseditor {
	width : 100%;
	height : 100%;
	position : relative;
	.scene {
		width : 1px;
		height : 1px;
	}
	.codeeditor {
		margin-top : 20px;
		height : 100%;
		.codeErrorMessage {
			top : 20px;
			width : 90%;
		}
	}
}

.domkitEditor {
	height: 100%;
	width: 100%;

	.editors {
		display: flex;
		height: 100%;

		.panel {
			height: 100%;

			&.left {
				width: 48%;
			}

			&.right {
				padding-left: 10px;
				flex-grow: 1;
				>.editor {
					height: 100%;
				}
			}

			>.editor {
				display: flex;
				flex-direction: column;
				height: 50%;

				>span {
					font-size: 18px;
					margin: 15px 0px 5px 10px;
				}
				.codeeditor {
					flex-grow: 1;
					height: 5px;
				}
			}
		}
	}

	.scene {
		width : 1px;
		height : 1px;
	}
}

.profiler {
	width: 100%;
	height: 100%;
	display: flex;

	.ico {
		padding-left: 5px;
		padding-right: 5px;
		cursor: pointer;
		color: lightgray;
	}
	.disable {
		cursor: default;
		color: gray;
	}

	.left-panel {
		height: 100%;
		width: 80%;
		display: flex;
		background-color: #303030;
		flex-direction: column;

		.hide-tabs {
			height: 100%;
			width: 100%;
			#search-bar {
				display: inline;
				float: right;
			}
			.tab-content {
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;
				padding-bottom: 25px;
				box-sizing: border-box;
				margin: 2px;
				.hide-scroll {
					overflow-x: hidden;
				}
			}
		}

		table {
			overflow-y: scroll;
			margin-top: 10px;
			margin-bottom: 10px;

			caption {
				text-align: left;
			}

			thead {
				position: sticky;
				top: 0;
				background-color: #151515;

				td {
					font-weight: bold;
				}
			}

			#actions {
				padding-right: 3px;
				.ico {
					cursor: pointer;
					pointer-events: auto;
					color: lightgray;
				}
			}

			tr:hover {
				background-color: #272727;
			}

			tr:focus {
				background-color: #2c5d87;
			}

			thead {
				tr:hover {
					background-color: #151515;
				}
			}

			td:nth-last-child(1) {
				width: 100%;
				max-width: 700px;
				text-wrap: wrap;
			}

			td {
				padding: 3px 30px 3px 1px;
				overflow: hidden;
				white-space: nowrap;
			}

			.arrow {
				color: #4169E1;
			}

			.tid {
				color: #C71585;
			}

			.roots {
				color: #DAA520;
			}

		}
	}

	.right-panel {
		height: 100%;
		width: 20%;
		padding: 10px;
		box-sizing: border-box;
		overflow-x: hidden;

		dt {
			width: 80px;
			font-size: 11px;
			color: #aaa;
			user-select: none;
			text-transform: capitalize;
			font-weight: normal;
			vertical-align: top;
			display: inline-block;
			margin-top: 4px;
			max-width: 100%;
		}

		dd {
			position: relative;
			vertical-align: top;
			display: inline-block;
			text-wrap: wrap;
			word-break: break-word;
			margin-left: 0px;
			padding-left: 10px;
			padding-top: 4px;
			width: 200px;
			max-width: 100%;
			box-sizing: border-box;

			input {
				max-width: 100%;
				box-sizing: border-box;
			}
		}

		.outer-gauge {
			background-color: #535353;
			width: 100%;
			height: 15px;
		}

		.inner-gauge {
			background-color: #d6d6d6;
			height: 15px;
		}

		h4, h5 {
			margin-top:2px;
			margin-bottom: 2px;
		}

		h5 {
			word-wrap: break-word;
		}

		.title {
			text-align: center;
			font-size: 9pt;
			background-color: #151515;
			margin-bottom: 5px;
			margin-top: 5px;
			vertical-align: middle;
		}

		.drop-zone {
			background-color: #111111;
			border-style: dashed;
			border-width: 5px;
			height: 100px;
			padding-top: 20px;

			.label {
				text-align: center;
				pointer-events: none;
			}

			@keyframes zoomIn {
				from {
					transform: scale(0);
				}
				to {
					transform: scale(1);
				}
			}
		}

		.files-input {
			#process-btn {
				width: 100%;
			}
		}
	}
}

.remoteconsole {

	.ico {
		padding-left: 2px;
		padding-right: 2px;
		cursor: pointer;
	}
	.ico.disable {
		color: #444444;
		cursor: default;
	}

	input {
		margin-left: 2px;
		margin-right: 2px;
		background-color: #333333;
	}
	input:disabled {
		background-color: #222222;
	}
	input:disabled:hover {
		border-color: #505050;
	}
	input.wide {
		width: 300px;
	}

	.logs {
		margin-top: 2px;
		margin-bottom: 2px;
		background-color: #151515;
		height: 20px;
		overflow-y: auto;

		p {
			margin-block-start: 0px;
			margin-block-end: 0px;
		}

		.error {
			color: #ff2828;
		}
	}

	.remoteconsole-panel {
		border: 2px dashed #444444;
		border-radius: 4px;
		margin: 2px;
		margin-bottom: 10px;
		padding: 2px;
		box-sizing: border-box;

		.controls {
			float: right;
		}

		.logs {
			height: 100px;
		}

		.commands {
			fieldset {
				border: 1px dashed #333333;
			}
			.sub-command {
				margin: 3px 0px;
				.sub-sub-command {
					display: inline-block;
				}
				.dump-file {
					width: 200px;
				}
				input[type=checkbox] {
					display: inline-block;
					float: none;
					outline: 1px solid #505050;
					margin: 5px;
				}
			}
			h5 {
				display: inline-table;
				min-width: 80px;
				margin: 0px;
			}
		}
	}

	.new-panel {
		cursor: pointer;
		text-align: center;
	}
}

.devtools {
	width: 100%;
	height: 100%;
	webview {
		display: block;
	}
	#webview-blank {
		height: 0px;
	}
	#webview-devtools {
		height: 100%;
	}
}

.hover-parent {
	.hover-reveal {
		visibility: hidden;
	}
	&:hover {
		.hover-reveal {
			visibility: visible;
		}
		background-color: rgba(255,255,255,0.05);
	}
}

.flex-props {
	input{
		min-width: 0 !important;
		width: 100% !important;
		min-height: 0 !important;
		overflow: hidden;
		flex: 1;
	}

	.hide-range {
		display: flex;
		flex: 1;
		[type="range"] {
			flex: 3;
		}
	}

	.flex {
		display: inline-flex;
	}

	.fill {
		flex: 1;
	}
}

.fx-params {
	dt {
		text-transform: none;
	}
}

/* parameter name that appear near curves and other prefabs in the fx editor*/
.fx-parameter {
	font-size: 0.8em;
	margin-left: 1em;

	.fx-param-name {
		margin-left: 0.3em;
		max-width: 100px;
		direction: rtl;
		display: inline-block;
		overflow: hidden;
		vertical-align: bottom;
		text-overflow: clip;
	}
	&.missing .fx-param-name {
		text-decoration: line-through;
	}
}

.settings {
	width: 100%;
	height: 100%;

	.settings-header {
		width: 100%;
		height: 20px;
		border-bottom: solid #000000 1px;

		.search-bar {
			margin: 2px 5px 0px 0px;
			float: right;
			width: 15%;
			height: 16px;
		}
	}

	.settings-body {
		width: 100%;
		height: 100%;
		display: flex;

		.categories {
			width: 20%;
			height: 100%;
			padding-top: 5px;
			border-right: solid #000000 1px;

			p {
				padding: 1px 1px 1px 15px;
				margin: 0;
			}

			p:hover {
				background-color: #4d4d4d;
			}

			.selected {
				background-color: @color-highlight !important;
			}
		}

		.content {
			height: 100%;
			width: 100%;
			padding: 0px 15px 15px 10px;

			h1 {
				margin-top: 0;
				margin-bottom: 0;
			}

			dl {
				display:flex;
				overflow-x:hidden;
				margin:0px;
			}

			dd, dt {
				vertical-align:middle;
				text-wrap: wrap;
				word-break: break-word;
				margin-top:4px;

				span {
					display: inline-block;
					width: 20px;
				}
			}

			dt {
				width: 300px;
				color:#aaa;
				user-select:none;
				text-transform: capitalize;
				font-weight: normal;
			}

			dd {
				flex-grow: 1;
			}
		}
	}
}

.project-settings {
	width: 100%;
	height: 100%;

	h1 {
		margin: 5px 5px 5px 10px;
	}

	.loading {
		display: flex;
		margin-left: 10px;

		.ico {
			margin-right: 5px;
			align-self: center;
		}
	}

	.body {
		width: 100%;
		height:100%;
		display: flex;

		.left-panel {
			flex: 0.5;
			padding: 10px;

			.filter-container {
				display: flex;
				margin-bottom: 10px;

				p {
					margin: 0 5px 0 0;
				}

				.filter {
					flex : 1;
				}
			}
		}

		.right-panel {
			flex: 1;
			padding: 10px;
		}

		.array {
			.rows {
				min-height: 20px;
				max-height: 750px;
				overflow-y: scroll;
				width: 100%;
				background: #3f3f3f;
				border-radius: 2px 2px 0px 2px;

				.row {
					display: flex;
					flex-direction: row;
					width: 100%;

					.ico {
						margin-left: 5px;
						margin-right: 5px;
						align-self : center;
					}

					input {
						flex: 1;
						border: 1px solid #666;
						border-radius: 5px;
						box-sizing: border-box;
						margin: 2px;
					}

					&:hover {
						background: #5a5a5a;
					}

					&.selected {
						background: @color-highlight;
					}

					&.filtered {
						display: none;
					}
				}
			}

			.buttons {
				float: right;
				padding: 5px 10px 5px 10px;
				border-radius: 0px 0px 2px 2px;
				background: #3f3f3f;

				.add-btn {
					margin-right: 10px;
				}

				div {
					cursor: pointer;
				}

				div:hover {
					color: #e6e6e6;
				}
			}
		}
	}
}

// lod specific style in model viewer
.lods {
	.lods-line {
		position: relative;
		display:flex;
		overflow: hidden;
		height: 70px;


		.line {
			height: 30px;
			margin: 10px 2px 0px 2px;
			background-color: #151515;
			display: flex;
			overflow: hidden;
			padding: 1px;
			width: 100%;

			div {
				overflow-x: hidden;
				height:100%;
			}

			div:nth-child(1n) {
				background-color: #f3e179;
			}

			div:nth-child(2n) {
				background-color: #79f37b;
			}

			div:nth-child(3n) {
				background-color: #8979f3;
			}

			div:nth-child(4n) {
				background-color: #f379ad;
			}

			.crop {
				height: 100%;
				cursor: w-resize;
				width: 2px;
				background-color: #151515;
			}

			p {
				margin: 0 2px 0 2px;
				color: black;
			}
		}

		.cursor {
			position: absolute;
			top: 11px;
			pointer-events: none;

			.cursor-line {
				background-color: rgb(0, 0, 0);
				height: 32px;
				width: 2px;
			}

			p {
				text-align: center;
				margin-top: 2px;
			}
		}
	}

	#buttons {
		width: 100%;

		input {
			width: 100%;
			margin-top: 2px;
		}
	}
}


.curve-editor-popup {
	width: 600px;
	height: 400px;
}

hide-popover {
	resize: both;
	max-height: 90vh;
	max-width: 90vw;
	min-width: 100px;
	min-height: 100px;
	border: none;
	padding: 0;

	display: flex;
	flex-direction: column;

	title-bar {
		padding: 2px;
		background-color: #000000;
		display: flex;
		height: 20px;

		#title {
			flex-grow: 1;
			flex-shrink: 0;
			color: @color-text;
		}

		flex: 0 0;

		button {
			background: none;
			border: none;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			height: 16px;
			width: 16px;
			padding: 1px;
			i {
				font-size: 8px;
				color: @color-text;

			}
		}
	}

	hide-content {
		flex: 1 1;
		min-height: 0; // Allow the inner element to shrink, used to make the inner content scrollable
		padding: 0;
	}
}

.hide-tileselect {
	min-height: 0;
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	flex-direction: column;

	&:focus {
		outline: none;
	}

	.color-box {
		border: 1px solid #777;
	}

	tile-settings {
		display: flex;
		align-items: center;
		gap: 1em;
    	background: #222222;
		color: @color-text;
		min-height: 24px;
		padding: 2px;

		overflow: hidden;
		flex-shrink: 0;

		> * {
			flex-shrink: 0;
		}

		input.file {
			flex-grow: 1;
			max-width: 300px;
		}

		.dim-edit {
			> input {
				width: 32px;
			}
		}
	}

	background-container {
		align-self: stretch;
		display: block;
		padding: 0;
		flex-grow: 1;
		flex-shrink: 1;


		min-width: 0;
		min-height: 0;

		tile-picker {
			width: 100%;
			height: 100%;
			display: block;
			padding: 0;

			&::-webkit-scrollbar {
				width: 10px;
				height: 10px;
			}


			overflow: auto;

			image-display {
				display: block;
				position: relative;
				margin-right: @tileselect-cursor-border;
				margin-bottom: @tileselect-cursor-border;
				.valueDisp {
					position: absolute;
					background-color: rgba(0,80,128,0.3);
					border:1px solid rgba(128,128,128,0.5);
					pointer-events:none;
				}
				.cursor {
					position: absolute;
					border : @tileselect-cursor-border solid #fff;
					pointer-events:none;
				}
			}
		}

		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAE5JREFUWIVjnL12+38GCoCBnisl2hmYKNJNBTDqgFEHjDpg1AGjDhh1wKgDGE/f/kNRe+DCpd0UOWDAQ2DUAaMOGHXAqANGHTDqgFEHAAAO3QneZHM9AwAAAABJRU5ErkJggg==);
	}

}

.context-menu2 .search-bar, .fancy-search-bar{

	background-color: #444;
	border: 1px solid #666;
	border-radius: 2px;
	box-sizing: border-box;
	position: relative;

	input {
		color: #aaaaaa;
		font-family: var(--default-font), Geneva, Tahoma, sans-serif;
		width: 100%;
		box-sizing: border-box;

		border: none;
		margin: none;

		&:focus {
			outline: none;
		}
	}

	&:after {
		color: #aaaaaa;
		content: "\f002";
		font-family: "FontAwesome";
		position: absolute;
		right: 6px;
		top: 2px;
	}
}

.context-menu2 {
	--offset-x: 4;
	--offset-y: 0;
	background-color: #222222;
	border-radius: 5px;
	box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.75);

	border: solid 1px #444444;
	color: #aaaaaa;
	font-family: var(--default-font), sans-serif;
	font-size: 12px;

	&:focus {
		outline: none;
	}

	&:popover-open {
		position: absolute;
		inset: unset;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-width: 150px;

		max-width: 400px;
		bottom: 5px;
		right: 5px;
		margin: 0;
	}

	menu {
		max-height: min(500px, 90vh);
		overflow-y: auto;

		&::-webkit-scrollbar {
			width: 4px;
		}
		&::-webkit-scrollbar-track {
			background: transparent;
		}
		&::-webkit-scrollbar-thumb {
			background-color: rgba(155, 155, 155, 0.75);
			border-radius: 20px;
			border: transparent;
		}

		margin: 0px;
		padding: 0px;

		* {
			box-sizing: border-box;
		}

		separator {
			display: flex;
			align-items: center;
			h1 {
				font-weight: normal;
				margin: 0em 0.5em;
				font-size: 9pt;
				color: #888;
				white-space: nowrap;
			}
			hr {
				margin-top: 0.8em;
			}
			pointer-events: none;
		}
		hr {
			flex-grow: 1;
			border: 0;
			height: 1px;
			background-image: linear-gradient(to right, rgba(44,44,44,0), rgb(100, 100, 100), rgba(44,44,44));
			pointer-events: none;
		}

		&:not(:has(:hover, .highlight)) .open {
			background-color: #555555;
		}


		li {
			text-align: left;
			--level: 0;
			--menu-level: 0;
			--base-padding: 0.2em;
			padding: calc(0.2em);
			padding-left: calc(var(--base-padding) + var(--level) * 0.5em);
			display: flex;
			align-items: baseline;

			&:not(:has(.icon)) {
				--base-padding: 0.5em;
			}

			gap: 4px;
			&:hover, &.highlight {
				background-color: #555555;
			}

			user-select: none;

			.label {
				flex-grow: 1;
				padding-right: 1em;
			}

			.arrow, .fa, .icon, .shortcut {
				flex-grow: 0;
				flex-shrink: 0;
			}

			.icon {
				display: flex;
				justify-content: center;
				width: 1.4em;
			}

			.shortcut {
				color: #888;
				font-size: 0.8em;
			}

			&.submenu-inline-header {
				color: gray;
				background-color: #222222;
				font-style: italic;

				position: sticky;
				height: 20px;
				top: calc(20px * var(--level));

				&:hover {
					background-color: unset;
				}
			}

			&.disabled {
				color: #666;
				&:hover {
					background-color: unset;
				}
			}
		}

		hr {
			width: 100%;
		}
	}
}

.radial-menu {
	position: absolute;
	width: 500px;
	height: 500px;
	pointer-events: none;

	.center {
		position: absolute;
		&:before {
			color: #1a1a1a;
			font-size: 3em;
		}

		.center-selection {
			position: absolute;
			&:before {
				color: #3673b7;
				font-size: 3em;
				clip-path: polygon(0% 100%, 100% 100%, 50% 50%);
			}
		}
	}

	.radial-button {
		transition: top 0.2s, left 0.2s;
		position: absolute;
		display: flex;
		padding: 5px 7px 5px 7px;
		justify-content: center;
		align-items: center;
		background-color: #181818;
		border-radius: 5px;

		.ico {
			margin-right: 5px;
			margin-top: 2px;
		}

		&.selected {
			background-color: #3673b7 !important;
		}
	}
}

.tag-disp {
	color: white;
    mix-blend-mode: difference;
}



.hide-root {
	display: flex;
	flex-direction: column;
	justify-content: stretch;

	box-sizing: border-box;

	height: 100vh;
	width: 100vw;

	> .golden-layout-root {
		flex-grow: 1;
		background-color: #000000;
		min-height: 0;
		min-width: 0;

		overflow: clip;
	}

	> .status-bar {
		overflow-x: hidden;

		padding-left: 4px;
		padding-right: 4px;

		height: 16px;
		background-color: #202020;
		border-top: 1px solid #333;
		flex-shrink: 0;

		display: flex;

		font-family: var(--default-font);


		&.error {
			background-color: #ee6666;
			color: black;
		}

		.build {
			margin-left: auto;
			flex-grow: 0;
		}

		.error-suppressed {
			button {
				.ico {
					margin-right: 5px;
				}
				margin-right: 10px;
				border: none;
				background-color: #ee6666;

				&:hover {
					cursor: pointer;
					background-color: #ff8a8a;
					color: white
				}
			}

			flex-grow: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
			margin-right: auto;
			padding-left: 4px;
			padding-right: 4px;
			color: black;
			border-radius: 3px;
		}

		#status-icons {
			flex-grow: 0;
			display: flex;
			align-items: center;

			gap: 4px;

			> .icon {
				height: 14px;
				width: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1em;
			}

			button {
				height: 14px;
				font-size: 0.8em;
				padding: 2px;
				margin: 0px;
				border: none;
				outline: none;
				border-radius: 2px;

				background-color: #efefef;
				&:hover {
					background-color: #ddd;
				}
			}
		}


	}
}

/* Spline inspector */
.spline-editor {
	.points-inspector {
		@background-color : #222222;
		@background-color-highlight : #535353;

		width: 100%;
		margin-top: 10px;

		.content {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row-reverse;

			.buttons {
				background: @background-color;
				border-radius: 5px 5px 0 0;
				padding: 3px 10px 3px 10px;
				cursor: pointer;

				div {
					margin: 0 2px 0 2px;
				}

				div:hover {
					color: @background-color-highlight;
				}
			}

			.points-container {
				min-height: 10px;
				width: 100%;
				border-radius: 5px 0 5px 5px;
				background: @background-color;
				padding: 3px;

				.point {
					margin-bottom: 1px;

					.header {
						padding: 3px 0px 3px 8px;
						background-color: #414141;
						border-radius: 5px;
						cursor: pointer;
						display: flex;

						.icon {
							align-self: center;
							margin-right: 5px;
							cursor: pointer;
						}

						.icon:hover {
							color: #ececec;
						}

						#remove {
							margin-left: auto;
						}

						p {
							margin: 0;
						}
					}

					.header:hover {
						background-color: #686868;
					}

					.body {
						padding-bottom: 15px;
						white-space: nowrap;
						dd {
							input {
								width: 28%;
								margin-right: 1px;
							}
						}
					}

					&.folded {
						.body {
							display: none;
						}
					}

					&.selected {
						.header {
							background-color: #2c5d87;
						}

						.body {
							background-color: #4f657f;
						}
					}
				}
			}
		}
	}

	.btn {
		margin-top: 5px;
	}
}

:root {
	--hover-highlight: rgba(114, 180, 255, 0.5);
	--selection: #3185ce;
	--drop-feedback: white;

	--hover: #444;

	--basic-shadow: 2px 2px 3px rgba(0,0,0,.75);
	--sublte-shadow: 1px 1px 3px rgba(0,0,0,.33);

	--basic-border: 1px solid #353535;
	--basic-border-hover: 1px solid #555;
	--basic-border-focused: 1px solid var(--selection);

	--basic-border-radius: 5px;
	--basic-padding: 0.2em;


	--bg-0: #000;
	--bg-1: #111;
	--bg-2: #222;
	--bg-3: #333;
}

button-2 {
	min-height: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: var(--basic-border);
	border-radius: var(--basic-border-radius);
	box-sizing: border-box;
	padding-left: calc(var(--basic-padding) * 2);
	padding-right: calc(var(--basic-padding) * 2);
	padding-top: var(--basic-padding);
	padding-bottom: var(--basic-padding);

	background-color: var(--bg-2);

	&:hover {
		background-color: var(--hover);
	}

	value {
		flex-grow: 1;
		overflow-x: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	&:active {
		box-shadow: inset var(--sublte-shadow);
	}

	&.no-border {
		background-color: red;
		border: none;

		color: #777;

		&:hover {
			color: #AAA;
		}
	}
}

/** GenericGraphEditor**/

graph-editor-root {
	width: 100%;
	height: 100%;
	box-sizing: border-box;

	display: flex;
	justify-items: stretch;
	align-items: stretch;

	graph-container {
		display: flex;
		flex: 1 1;
		background-color: var(--bg-1);
		position: relative;

		preview-container {
			z-index: 1;
			position: absolute;
			min-width: 150px;
			min-height: 150px;
			right: 16px;
			bottom: 16px;
			height: 300px;
			width: 300px;

			border: var(--basic-border);
			overflow: hidden;
			border-radius: var(--basic-border-radius);

			box-shadow: var(--basic-shadow);

			.resize-handle {
				--size: 5px;

				position: absolute;

				background-color: transparent;

				&:hover {
					background-color: var(--hover-highlight);
				}

				&.up {
					left: 0px;
					right: 0px;
					top: 0px;
					height: var(--size);

					&:hover {
						cursor: n-resize;
					}
				}

				&.up-left {
					left: 0;
					top: 0;
					height: calc(var(--size) * 2);
					width: calc(var(--size) * 2);

					&:hover {
						cursor: nw-resize;
					}
				}

				&.left {
					left: 0px;
					top: 0px;
					bottom: 0px;
					width: var(--size);

					&:hover {
						cursor: e-resize;
					}
				}
			}
			.hide-toolbar2 {
				position: absolute;
				top: 8px;
				right: 8px;
			}
		}
	}

	properties-container {
		padding: var(--basic-padding);

		display: flex;
		flex-direction: column;
		flex-basis: 300px;


		border-left: var(--basic-border);

		background-color: var(--bg-1);

		graph-parameters {
			display: flex;
			flex-direction: column;
			flex-grow: 1;

			min-width: 0;
			min-height: 0;

			h1 {
				font-size: 1.2em;
			}
		}

		.anim-list {
			flex-grow: 0;
			flex-shrink: 0;
		}
	}
}


:root {
	--fancy-border-color: #555;
	--fancy-border-color-focus: rgba(114, 180, 255, 0.75);
	--fancy-main-text-color: #FFF;
	--fancy-quiet-text-color: #999;
}

.fancy-small {
	fancy-button, fancy-button& {
		--size: 22px;
	}
}

.fancy-normal {
	fancy-button, fancy-button& {
		--size: 28px;
	}
}

.fancy-big {
	fancy-button, fancy-button& {
		--size: 36px;
	}
}

fancy-toolbar {
	display: flex;
	flex-direction: row;
	align-items: center;

	padding-top: 2px;
	padding-bottom: 2px;

	padding-left: 0.25em;
	padding-right: 0.25em;
}

fancy-toolbar.shadow, fancy-closable.shadow {
	position: relative;
	background-color: #272727;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	z-index: 1;
}

fancy-button {
	position: relative;
	--size: 28px;
	border: 1px solid var(--fancy-border-color);
	flex-shrink: 0;

	border-radius: var(--radius);

	text-align: center;

	height: var(--size);
	min-width: var(--size);

	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;

	user-select: none;

	color: #DDD;

	&:has(.label), &.dropdown {
		padding-left: 0.5em;
		padding-right: 0.5em;
		//aspect-ratio: unset;
	}

	&.dropdown::after {
		font-family: "FontAwesome";
		content: "\f078";
		font-size: 0.5em;
	}

	gap: 0.5em;

	font-size: calc(var(--size) * 0.5);

	.label {
		font-weight: 200;
		text-rendering: optimizeLegibility;
	}

	&:hover {
		background-color: #555;
	}

	&:active {
		translate: 0px 1px;
	}

	&.quiet {
		border: none;
		padding: 1px;
	}

	&.quieter {
		border: none;
		padding: 1px;

		color: var(--fancy-quiet-text-color);

		&:hover {
			background: none;
			color: var(--fancy-main-text-color);
		}
	}

	&.compact {
		min-width: unset;
		.ico {
			font-size: 0.7em;
		}
	}

	margin-left: 0px;

	--radius: 3px;

	/* remove start rounded corner if previous element is a fancy button */
	&:has(+ &) {
		border-start-end-radius: 0;
		border-end-end-radius: 0;

	}

	/* remove end rounded corners if next element is a fancy-button */
	& + & {
		border-start-start-radius: 0;
		border-end-start-radius: 0;
		margin-left: -1px;
	}

	&.selected {
		color: #000;
		background-color: #DDD;

		&:hover {
			background-color: #FFF;
		}
	}
}

fancy-separator {
	border: none;
	height: 0;
	min-width: 0;
	max-width: 0;
	padding: 0;
	margin: 0 0.5em;
	height: 16px;
}

fancy-array {
	box-sizing: border-box;

	* {
		box-sizing: border-box;
	}

	padding: var(--basic-padding);
	border-radius: var(--basic-border-radius);
	border: var(--basic-border);
	display: flex;
	flex-direction: column;
	align-items: stretch;

	background-color: var(--bg-2);

	overflow-y: auto;

	fancy-array {
		padding-right: -1px;
	}

	fancy-items {
		display: flex;
		flex-direction: column;

		gap: 2px;

		justify-content: stretch;

		fancy-item {
			display: flex;
			flex-direction: column;
			position: relative;

			&.reveal {
				outline: 2px solid;
				animation-duration: 0.75s;
				animation-name: focus-show;
				outline-color: transparent;
				outline-offset: -2px;
				z-index: 1;
			}

			@keyframes focus-show {
				0%, 25%, 50%, 75% {
					outline-color: rgba(67, 87, 143, 1.0);
				}

				12%, 37%, 62% {
					outline-color: rgb(123, 140, 185);
				}

				100% {
					outline-color: rgba(67, 87, 143, 0.0);
				}
			}

			fancy-item-header {
				display: flex;

				color: var(--fancy-quiet-text-color);
				border-radius: 3px;

				background-color: #444;
				align-items: center;

				>input[type="text"] {
					min-width: 0;
					width: 0;

					flex-grow: 1;

					background: none;
					outline: none;
					border: none;

					font-size: 14px;


					&:hover {
						outline: 1px solid var(--fancy-border-color);
						border-radius: 3px;
					}

					&:focus {
						outline: 1px solid var(--fancy-border-color-focus);
						border-radius: 3px;
					}
				}
			}

			fancy-item-content {
				display: none;
				padding:  1em 1em;
				padding-right: 0px;
				padding-right: 0;
			}

			.toggle-open * {
				transition: transform 0.2s;
			}

			&.open {
				> fancy-item-header .toggle-open *{
					transform: rotate(90deg);
				}

				fancy-item-header {
					border-bottom-left-radius: 0;
					border-bottom-right-radius: 0;
				}

				> fancy-item-content{
					display: block;
					background-color: #2d2d2d;
					border-top: none;
					border-bottom-left-radius: var(--basic-border-radius);
					border-bottom-right-radius: var(--basic-border-radius);
				}
			}

			&.hovertop:before, &.hoverbot:after {
				display: block;
				position: absolute;
				z-index: 100;
				margin: 0 auto;
				width: 100%;
				content: "";
			}

			&:before {
				background: linear-gradient(0deg, rgba(114, 180, 255, 0.0) 0%, rgba(114, 180, 255, 0.75) 100%);
				top: -2px;
				height: 10px;
				pointer-events: none;
			}

			&:after {
				background: linear-gradient(180deg, rgba(114, 180, 255, 0.0) 0%, rgba(114, 180, 255, 0.75) 100%);
				height: 10px;
				bottom: -2px;
				pointer-events: none;
			}
		}
	}
}


center-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/** Blendspace2dEditor **/

blend-space-2d-root {
	width: 100%;
	height: 100%;
	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	justify-items: stretch;
	align-items: stretch;

	main-panel {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-items: stretch;
		align-items: stretch;

		preview-container {
			position: relative;
			background-color: var(--bg-1);
			flex: 1;

			.scene-preview {
				width: 100%;
				height: 100%;
			}

			.hide-toolbar2 {
				position: absolute;
				top: 8px;
				right: 8px;
			}
		}

		graph-container {
			height: 40%;

			position: relative;

			background-color: var(--bg-1);
			margin: 16px;

			svg {
				width: 100%;
				height: 100%;
				box-sizing: border-box;

				border: var(--basic-border);

				.tri {
					stroke: #888;
					stroke-width: 1;
					fill: rgba(114, 180, 255, 0.226);
				}

				.grid {
					stroke: #444;
					stroke-dasharray: 4;
					stroke-width: 1;
				}

				.grid-label {
					fill: #AAA;
					text-anchor: middle;
				}

				.bs-point {
					fill: black;
					stroke: white;
					stroke-width: 2;

					&.hover {
						stroke-width: 4;
					}

					&.selected {
						stroke: var(--selection);
					}

				}

				.preview-axis {
					fill: none;
					stroke: #008a00;
					stroke-width: 2;
				}

				.preview-axis-real {
					fill: none;
					stroke: #008a00;
					stroke-width: 1;
				}
			}

			drag-handler {
				z-index: 1;
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				top: 0;
			}
		}
	}

	properties-container {
		padding: var(--basic-padding);

		display: flex;
		flex-direction: column;
		width: 320px;

		border-left: var(--basic-border);

		background-color: var(--bg-1);

		parameters-container {
			flex-grow: 1;
		}

		.hide-properties {
			padding: 1em;
			display: flex;
			flex-direction: column;

			gap: 0.5em;

			input {
				min-width: 0;
				width: 0;
			}

			dl {
				display: grid;
				grid-template-columns: 6em minmax(0, 1fr);
				row-gap: 1px;
				column-gap: 0.5em;
				width: 100%;

				> div {
					display: grid;
					grid-column: 1 / -1;
					grid-template-columns: subgrid;
					align-items: center;
					> dt {
						width: unset;
						text-align: right;
					}

					> dd {
						width: unset;
						margin-left: 0;

						display: flex;
						justify-content: stretch;

						> * {
							flex: 1 1;
						}
					}

					.hide-range {
						display: flex;
						input[type="range"] {
							min-width: 0;
							width: 0;
							flex: 1 1;
						}

						input[type="text"] {
							min-width: 0;
							width: 0;
							flex: 0 0 4em;
						}
					}
				}
			}
		}

	}

}

.basic-border {
	padding: var(--basic-padding);
	border: var(--basic-border);
	border-radius: var(--basic-border-radius);
}

.anim-list {
	padding: var(--basic-padding);
	border: var(--basic-border);
	border-radius: var(--basic-border-radius);
	height: 400px;
	display: flex;
	flex-direction: column;
	h1 {
		font-size: 1em;
		padding: 0;
		margin: 0;
		font-weight: normal;
	}

	> ul {
		flex-grow: 1;
		overflow: auto;
		border: var(--basic-border);
		border-radius: var(--basic-border-radius);
		padding: var(--basic-padding);

		> li {
			&:hover {
				background-color: var(--hover-highlight);
			}
			border-radius: var(--basic-border-radius);
		}
	}
}

.array-sub-buttons {
	display: flex;
	justify-content: flex-end;

	.add {
		padding: 5px 10px 5px 10px;
		background: @color-menu-bg-highlight;
		border-radius: 0px 0px 3px 3px;
		margin: 0 5px 0 5px;
		cursor: pointer;

		&:hover {
			&::before {
				filter: brightness(80%);
			}
		}
	}
}

.hide-gym {
	background-color: #111;
	padding: 2em;
	box-sizing: border-box;

	h1 {
		font-size: 1.1em;
	}

	details {
		summary {
			font-size: 1.5em;
			background-color: #333;
			padding: var(--basic-padding);
			border-radius: var(--basic-border-radius);

		}

		padding: 1em;
		background-color: #222;

		border-radius: var(--basic-border-radius);
	}
}


.merge-bottom {
	border-bottom-right-radius: 0;
}

.merge-top {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	align-self: flex-end;
	margin-top: -1px;
	background-color: #353535;
	border: none;
}

.subtle-title {
	margin: 0;
	margin-left: 0.5em;
	font-weight: normal;
	font-style: italic;
	font-size: 1.2em;
}

.fancy-hide {
	display: none;
}

file-browser {
	display: flex;
	flex-direction: row;

	&.vertical {
		flex-direction: column;
	}

	&.single > .left {
		flex: 1 1;
	}

	height: 100%;
	width: 100%;

	.left {
		width: 300px;
		min-width: 100px;
		background-color: mediumaquamarine;
	}

	.right {
		flex: 1 1;
		display: flex;
		flex-direction: column;

		.footer {
			height: 12px;
			font-size: 11px;
			background-color: #272727;
		}
	}
}

fancy-flex-fill {
	flex: 1 1;
}

fancy-icon {
	aspect-ratio: 1/1;
	height: 1em;
	display: block;
	mask-size: contain;
	background-color: currentColor;
	mask-mode: luminance;
	mask-repeat: no-repeat;
	mask-position: center;

	&.small {
		height: 12px;
	}

	&.med {
		height: 18px;
	}

	&.big {
		height: 22px;
	}

	&.fi-right-caret 		{ mask-image: url("res/icons/svg/right_caret.svg"); }
	&.fi-close 				{ mask-image: url("res/icons/svg/close.svg"); }
	&.fi-search 			{ mask-image: url("res/icons/svg/search.svg"); }
}


fancy-search {
	position: relative;
	flex: 1 1;
	padding: 2px;
	max-width: 400px;

	&, * {
		box-sizing: border-box;
	}

	> input {
		border: var(--basic-border);
		border-radius: var(--basic-border-radius);

		&:hover {
			border: var(--basic-border-hover);
		}

		&:focus {
			border: var(--basic-border-focused);

			outline: none;
		}

		min-width: 0;
		width: 100%;
		height: 100%;
	}

	.search-icon {
		position: absolute;
		right: 0.5em;
		top: 50%;
		transform: translateY(-50%);
		color: #999;
		z-index: 1;
	}
}

fancy-tree {
	--anim-speed: 0.1s;

	background-color: #222;

	height: 100%;
	display: flex;
	flex-direction: column;

	&:focus {
		outline: none;
	}

	fancy-scroll {
		display: block;
		width: 100%;
		flex: 1 1;
		min-width: 100px;
		overflow-x: clip;
		overflow-y: auto;

		fancy-item-container {
			position: relative;
			display: block;
			overflow: hidden;

			contain: strict;
		}

		fancy-tree-item {
			position: absolute;
			--depth: 0;
			--highlight: 0;
			width: 100%;
			top: 0;

			contain: strict;

			display: flex;

			&.hidden {
				filter: opacity(40%);
			}

			&.hide-search {
				overflow: hidden;
				height: 0px;
				display: none;
			}

			&.open> .caret::before {
				transform: rotate(90deg);
			}

			&.selected {
				color: white;
				--background: var(--selection);
			}

			&.editorOnly {
				color: rgb(2, 174, 218);
			}

			&.inGameOnly {
				color: rgb(218, 168, 2);
			}

			&.hidden {
				color: #555;
			}

			&.locked {
				font-style: italic;
			}

			&.disabled {
				color: #ee6666;
			}

			&.inRef {
				--background: rgb(58, 58, 58);
			}

			&.isOverride {
				--background: rgb(12, 35, 70);
			}

			&.isOverride.isOverriden {
				color: cyan;
			}

			&.isOverride.isOverriden.isOverridenNew {
				color: rgb(38, 199, 38);
			}

			// Select if we have a children that is selected
			&:has(fancy-tree-children .selected) > fancy-tree-header {
				fancy-tree-name {
					text-decoration: underline var(--selection);
				}
			}

			&.current {
				outline: dashed 1px #AAA;
				z-index: 10;
				outline-offset: -1px;
			}

			// &:hover {
			// 	background-color: var(--hover);
			// }

			fancy-button.quieter {
				--size: 16px;
				font-size: 12px;

				pointer-events: all;

				color: #CCC;

				&.button-hidden {
					visibility: hidden;
				}

				text-shadow: 1px 1px 1px rgba(.0,.0,.0,.75);
			}

			.hidden {
				visibility: hidden;
			}

			box-sizing: border-box;

			--padding: calc((var(--depth) - 1) * 1.0em + 0.25em);
			padding-left: var(--padding);
			box-sizing: border-box;

			height: 20px;
			max-height: 20px;
			min-height: 20px;

			--background: #222;
			background-color: e("hsl(from var(--background) h s calc(var(--highlight) + l))");

			display: flex;

			&:hover {
				--highlight: 10;
				cursor: pointer;

				fancy-button.hidden {
					visibility: visible;
				}
			}

			fancy-tree-icon {
				align-self: center;
				width: 16px;
				height: 16px;

				display: block;

				flex-shrink: 0;

				filter: drop-shadow(1px 1px rgba(0,0,0,0.5));

				&.caret {
					width: 16px;
					height: 16px;
					&::before {
						content: "";
						position: absolute;
						top: 0; left: 0;
						margin: 2px;
						width: 12px; height: 12px;

						transition: transform var(--anim-speed);
						background-color: currentColor;
						mask-image: url("res/icons/svg/right_caret.svg");

						mask-position: center;
						mask-repeat: no-repeat;
						mask-size: contain;

						pointer-events: all;
					}
				}
			}

			fancy-tree-name {
				display: block;
				text-overflow: ellipsis;
				align-self: stretch;
				overflow: clip;
				text-wrap: nowrap;
				flex-shrink: 1;
				filter: drop-shadow(1px 1px rgba(0,0,0,0.5));
				min-width: 2em;
				padding: 1px;
				padding-left: 0;
				align-content: center;

				&:focus {
					z-index: 100;
					background-color: #222;
					outline-offset: 1px;
				}

				>span.search-hl {
					background-color: var(--selection);
					color: white;
				}

			}

			&.feedback-drop-top::after {
				position: absolute;
				content: "";
				display: block;
				left: var(--padding);
				right: 0;
				top: 0;
				border-top: solid 1px var(--drop-feedback);
				z-index: 10;
				pointer-events: none;
			}

			&.feedback-drop-bot::after {
				position: absolute;
				content: "";
				display: block;
				left: var(--padding);
				right: 0;
				bottom: 0;
				border-top: solid 1px var(--drop-feedback);
				z-index: 10;
				pointer-events: none;
			}

			&.feedback-drop-in::after {
				position: absolute;
				content: "";
				display: block;
				left: var(--padding);
				right: 0;
				bottom: 0;
				top: 0;
				border: solid 1px var(--drop-feedback);
				z-index: 10;
				pointer-events: none;
			}



		}
	}

	&.overlay {
		background-color: transparent;
		fancy-scroll {
			fancy-tree-item {
				--background: rgba(0,0,0,0);
				&:hover {
					--background: #222;
					color: #e2e2e2;
				}
			}
		}
 	}
}

fancy-gallery {
	display: flex;
	flex-direction: column;
	overflow: none;

	flex-grow: 0;
	flex-shrink: 1;
	align-self: stretch;

	min-width: 0;
	min-height: 0;

	width: 100%;
	height: 100%;

	&,* {
		box-sizing: border-box;
	}

	contain: strict;


	fancy-scroll {
		flex: 1 1;
		overflow-y: scroll;

		fancy-item-container {
			position: relative;
			display: block;
			overflow: hidden;

			width: 100%;
			min-height: 100%;

			contain: strict;
		}
	}
}

fancy-gallery fancy-item, fancy-tooltip fancy-item {
	padding: 4px;
	position: absolute;
	align-items: stretch;
	overflow: hidden;

	contain: layout paint size style;

	background-color: #282828;
	border-radius: 6px;

	color: #aaa;

	contain: strict;

	&:hover {
		background-color: var(--hover);
	}

	&.selected {
		color: white;
		background-color: var(--selection);
	}

	&.current {
		outline: dashed 1px #AAA;
		z-index: 10;
		outline-offset: -1px;
	}

	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);

	&.details {
		padding: 0;
		display: flex;
		align-items: flex-end;

		box-shadow: unset;
		border-radius: unset;

		gap: 0.4em;
	}

	fancy-thumbnail {
		flex: 0 1;
		display: block;
		width: 100%;
		height: 100%;
	}

	.icon-placement {
		position: absolute;
		color: white;
		bottom: 2px;
		right: 2px;
		filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 70%));
	}

	.thumb {
		transform: unset;
	}

	// .loading {
	// 	// content: strict;
	// 	// animation: spinner 5.0s linear infinite;
	// 	// transform: rotate(0deg);
	// 	// @keyframes spinner {
	// 	// 	to { transform: rotate(360deg); }
	// 	// }
	// }

	&.details fancy-image {
		height: 100%;
		width: auto;
		aspect-ratio: 1 / 1;
	}

	fancy-name {
		position: absolute;
		bottom: 2px;
		left: 2px;
		right: 2px;
		height: 32px;
		display: block;
		text-align: center;
		text-wrap: wrap;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;

		>span.search-hl {
			background-color: var(--selection);
			color: white;
		}
	}

	&.details fancy-name {
		position: relative;
		height: auto;
		text-align: left;
	}

	&.details .icon-placement {
		position: relative;
		flex: 0 1;
		filter: unset;
		color : #AAA;
		margin-left: 0.2em;
		font-size: 0.8em;
	}
}

fancy-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: scale(0.75,0.75);
}

fancy-breadcrumbs {
	fancy-breadcrumbs-separator {
		padding: 0.5em;
	}
}

fancy-closable {
	* {
		box-sizing: border-box;
	}
	overflow: hidden;
	height: 0px;
}

fancy-tooltip {
	z-index: 1;
	position: absolute;
	pointer-events: none;

	border: none;
	box-shadow: none;
	outline: none;
	background: none;

	box-shadow: var(--basic-shadow);

	margin: 0;
	overflow: visible;

	// fancy-image {
	// 	transform: none;
	// }
}

.fancy-status-icon {
	position: relative;

	&::after {
		content: " ";
		aspect-ratio: 1/1;
		height: 1em;
		display: block;
		mask-size: contain;
		background-color: currentColor;
		mask-mode: luminance;
		mask-repeat: no-repeat;
		mask-position: center;
		width: 6px;
		height: 6px;
		position: absolute;
		left: -2px;
		bottom: 1px;
	}

	&.fancy-status-icon-ok::after {
		mask-image: url("res/icons/svg/dot.svg");
		color: #87D58E;
	}

	&.fancy-status-icon-modified::after {
		mask-image: url("res/icons/svg/dot.svg");
		color: #FE383A;
	}
}

.lm_tabdropdown_list {
	z-index: 9999 !important;
	background-color: #111111;
}

.ref-viewer {
	overflow-x: hidden;
	>.header {
		text-wrap: nowrap;
		overflow: hidden;
		border-left: 5px solid;
		display: flex;
		flex-direction: column;
		margin: 10px 10px 10px 20px;
		padding-left: 5px;
		font-size: 1.1em;

		.title {
			font-weight: 600;
			em {
				font-weight: 400;
				font-style: normal;
				background-color: #404248;
				border-radius: 10px;
				padding: 2px 8px 2px 8px;
				cursor: pointer;

				&:hover {
					background-color: #585a63;
				}
			}
		}

		.infos {
			color : #c8c8ff;
		}
	}

	.reference {
		width: 100%;

		.header {
			display: flex;
			align-items: center;
  			justify-content: center;

			&:hover {
				cursor: pointer;
				background-color: #484848;
			}

			.icon {
				margin: 0 5px 0 5px;
			}

			.file {
				align-self: top;
				margin-right: 10px;
				font-weight: 800;
			}

			.path {
				overflow: hidden;
				flex-grow: 1;
				font-weight: 200 !important;
			}

			.ref-count {
				margin-right: 5px;
				background-color: #404248;
				padding: 1px 5px 1px 5px;
				border-radius: 10px;
			}

			.folded {
				transform: rotate(-90deg);
			}

			.ico:before {
				font-size: 1.6em;
			}
		}

		.content {
			width: 100%;
			display: flex;
			flex-direction: column;
			margin-left: 26px;

			.result {
				display: flex;
				flex-direction: column;
				overflow: hidden;
				text-wrap: nowrap;
				padding: 3px 0 3px 0;

				.entry {
					overflow: hidden;
					cursor: pointer;

					a {
						&:hover {
							color: rgb(200, 200, 255);
						}

						em {
							font-style: normal;
							background-color: #FFFFFF20;
						}
					}
				}
			}
		}
	}
}