* {
	transition: all 0.2s ease;
	outline: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

body {
	background-color: var(--background);
	color: var(--color);
	font-family: var(--font2);
	font-size: 12px;
}

input {
	all: unset;
}

::before {
	color: var(--color);
}

* {
	scrollbar-width: thin;
	scrollbar-color: #bf8b0f #101010;
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #101010;
}

::-webkit-scrollbar-thumb {
	background-color: var(--accent);
	border-radius: 10px;
	border: 1px solid #101010;
}

::-webkit-scrollbar-track {
	background-color: #101010;
}

#application {
	display: grid;
	grid-template-columns: 75px auto;
	grid-template-rows: 40px auto 20px;
	grid-template-areas:
		'm h'
		'm c'
		'f f';
	overflow: hidden;
	height: 100vh;
	width: 100vw;
	box-sizing: border-box;
}

#application>div.content-wrapper {
	grid-area: c;
	display: flex;
	background-color: #202020;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

#application>div.login-wrapper {
	display: flex;
	grid-column: 1 / -1;
	grid-row: 2;
	width: 100%;
	height: 100%;
	background-color: #101010;
	box-sizing: border-box;
	position: relative;
	align-items: center;
	justify-content: center;
}

#application:has(.menu-wrapper > ul > li:not(:first-child):hover)>.content-wrapper {
	opacity: 0.1;
}

li.node {
	display: grid;
	grid-template-columns: min-content auto min-content;
	grid-template-areas: 'delete edit';
	background-color: #161616;
	height: calc(100% / 25);
	width: 100%;
	font-family: var(--font3);
	font-size: 12px;
	padding: 0;
	margin: 0;
}

li.node:nth-of-type(odd) {
	background-color: #181818;
}

li.node > button {
	grid-area: edit;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
	width: 100%;
	border: none;
	background-color: transparent;
	padding: 5px;
	cursor: pointer;
	color: var(--color);
}

li.node > button.delete {
	grid-area: delete;
	display: flex;
	width: min-content;
}

li.node > button.delete::before {
	font-family: var(--bootstrap);
	content: "\F623";
	color: var(--error);
}

li.node > button > span {
	display: flex;
	align-items: center;
	font-family: var(--font2);
	font-size: 11px;
	padding: 0;
	margin-left: auto;
	color: darkseagreen;
}

li.node > button:hover {
	color: var(--accent);
}

ul.node-data {
	position: absolute;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: auto;
	min-width: 50%;
	max-width: 90%;
	max-height: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #202020;
	border-radius: 3px;
	border: 1px solid var(--border);
	box-sizing: border-box;
	height: auto;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
	gap: 10px;
}

ul.node-data > li {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 100%;
	font-family: var(--font3);
	font-size: 12px;
	padding: 5px 10px;
	margin: 0;
	overflow: hidden;
	box-sizing: border-box;
}

ul.node-data > li > span {
	display: flex;
	align-items: center;
	width: auto;
	box-sizing: border-box;
}

ul.node-data > li > span:last-of-type {
	margin-right: auto;
}

ul.node-data > li > span:nth-of-type(2) {
	background-color: #181818;
	color: var(--accent);
	padding: 5px;
	border-radius: 3px;
}

ul.node-data > li:first-child {
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	background: linear-gradient(to right, #101010, transparent);
	padding: 10px;
	color: var(--accent);
	height: min-content;
}

ul.node-data>li:first-child>span {
	font-size: 18px;
	font-weight: 700;
	font-family: var(--font1);
}

ul.node-data > li:first-child > button {
	display: flex;
	align-items: center;
	margin-left: auto;
	appearance: none;
	background-color: transparent;
	border: none;
	cursor: pointer;
}

ul.node-data>li:first-child > button::after {
	font-family: var(--bootstrap);
	content: "\F629";
	color: var(--error);
}

ul.node-data > li:first-child > button:hover::after {
	content: "\F628";
}

ul.node-data > li > textarea {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 99%;
	height: auto;
	border: none;
	background-color: transparent;
	box-sizing: border-box;
	color: var(--color);
	font-family: var(--font2);
	font-size: 10px;
	resize: none;
	flex: 100%;
	margin: 4px;
	background-color: #101010;
	border: 1px solid #353535;
	border-radius: 5px;
	min-height: 250px;
	padding: 5px;
}

ul.node-data > li > input[type="text"] {
	display: flex;
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	background: #2a2a2a;
	border-radius: 3px;
	outline: none;
	cursor: pointer;
	height: auto;
	padding: 5px;
}

ul.node-data > li > input[type="text"]:focus-within {
	background-color: #303030;
}

ul.node-data > li > input[type="range"] {
	display: flex;
	width: 50%;
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	background: #2a2a2a;
	border-radius: 3px;
	outline: none;
	cursor: pointer;
}

ul.node-data > li > input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	background: var(--accent);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
}
 
ul.node-data > li > input[type="range"]::-webkit-slider-thumb:hover {
	background: #ffffff;
	transform: scale(1.1);
}

ul.node-data > li > input[type="checkbox"]:not(:checked)::after {
	color: transparent;
	content: ".";
}

ul.node-data > li > input[type="checkbox"] {
	display: flex;
	border: 1px solid #353535;
	background-color: #181818;
	width: 15px;
	height: 15px;
	border-radius: 3px;
	overflow: hidden;
	color: transparent;
	margin-right: 5px;
	opacity: 1;
}

ul.node-data > li > input[type="checkbox"]:checked {
	border: 1px solid var(--accent-border);
}

ul.node-data > li > input[type="checkbox"]:checked::after {
	background-color: var(--accent);
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	transform: scale(0.75);
	top: 0;
	left: 0;
	content: ".";
	color: transparent;
}

ul.node-data > li.node-dropdown {
	position: relative;
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin: 0;
	overflow: visible;
}

ul.node-data > li.node-dropdown > input[type="text"] {
	display: flex;
	font-family: var(--font3);
	font-size: 11px;
	color: var(--gold);
	font-weight: 500;
	border: 1px solid transparent;
	padding: 5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: min-content;
	max-width: 75%;
	text-align: right;
	background-color: #2a2a2a;
	border-radius: 5px;
	min-width: 200px;
	caret-color: transparent;
	cursor: pointer;
}

ul.node-data > li.node-dropdown:has(input[type="text"]:focus) > ul {
	display: flex;
}

ul.node-data > li.node-dropdown > ul {
	position: absolute;
	display: none;
	flex-direction: column;
	z-index: 50;
	top: calc(100% + 5px);
	right: 10px;
	background-color: #181818;
	height: auto;
	max-height: 200px;
	border: 1px solid var(--border);
	padding: 0;
	box-sizing: border-box;
	border-radius: 3px;
	overflow: auto;
	min-width: 200px;
	align-items: flex-end;
	gap: 5px;
}

ul.node-data > li.node-dropdown > ul > li:hover {
	background-color: #1b1b1b;
}

ul.node-data > li.node-dropdown > ul > li {
	display: flex;
	width: 100%;
	padding: 0;
}

ul.node-data>li.node-dropdown > ul > li:hover > button {
	color: var(--accent);
}

ul.node-data > li.node-dropdown > ul > li > button {
	display: flex;
	width: 100%;
	background-color: transparent;
	border: none;
	color: var(--color);
	font-size: 12px;
	font-family: var(--font2);
}

ul.node-data > li.checkbox-group {
	display: flex;
	flex-direction: column;
	min-height: 250px;
	box-sizing: border-box;
	overflow: hidden;
	height: 400px;
}

ul.node-data > li.checkbox-group > input[type='text'] {
	display: flex;
	width: 50%;
	background-color: #303030;
	padding: 5px;
	border-radius: 3px;
	margin-right: auto;
	margin-top: 10px;
}

ul.node-data > li.checkbox-group > ul {
	display: flex;
	width: 100%;
	overflow: auto;
	box-sizing: border-box;
	padding: 5px;
	flex-wrap: wrap;
	gap: 2px;
	flex-direction: row;
	align-content: flex-start;
}

ul.node-data > li.checkbox-group > ul > li {
	display: flex;
	align-items: center;
	height: min-content;
	flex: none;
	width: 30%;
}

ul.node-data > li.checkbox-group > ul > li > span {
	display: flex;
	text-transform: capitalize;
}

ul.node-data > li.checkbox-group > ul > li > input {
	display: flex;
}

ul.node-data > li.checkbox-group > ul > li > input[type='checkbox']:not(:checked)::after {
	color: transparent;
	content: '.';
}

ul.node-data > li.checkbox-group > ul > li > input[type='checkbox'] {
	display: flex;
	border: 1px solid #353535;
	background-color: #181818;
	width: 15px;
	height: 15px;
	border-radius: 3px;
	overflow: hidden;
	color: transparent;
	margin-right: 5px;
	opacity: 1;
}

ul.node-data > li.checkbox-group > ul > li > input[type='checkbox']:checked {
	border: 1px solid var(--accent-border);
}

ul.node-data > li.checkbox-group > ul > li > input[type='checkbox']:checked::after {
	background-color: var(--accent);
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	transform: scale(0.75);
	top: 0;
	left: 0;
	content: '.';
	color: transparent;
}