:root {
  --bg-color: #7C5C6F;
  --header-color: #e2dbe1;
  --panel-color: white;
  --font-color: #black;
  --button-color: #DABFD4;
  --button-hover: #C8A2C8;
  --button-pressed: #9F5F9F;
  --border-color: #8A496B;
  --navbar-color: #503f49;
  --warning-bg-color: #ebecb0;
  --warning-color: #dabc38e8;
  --selected-gradient-color1: #ffffff;
  --selected-gradient-color2: #f0f0f0;
  --dragged-color: #9F5F9F;
  --font-new-entry-color: #000000;
  --font-invalid-entry-color: #c52828;
}

* {
	box-sizing: border-box;
	font-family: Roboto, Helvetica, Arial, sans-serif;
}
body {
	min-height: 100vh;
	background: var(--bg-color);
	color: var(--font-color);	
}
dialog {
	background-color: var(--header-color);
	border: 1px solid var(--border-color);
}
dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
}
.dialog-button-container {
	display: flex;
	flex-direction: row;
	gap: 20px;
	margin-top: 10px;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
}
.dialog-textarea {
	border: 1px solid var(--border-color);
	margin-top: 5px;	
	padding: 5px 10px;
	width: 400px;  
	height: 100px
}
.navbar-container {
	background: var(--navbar-color);
	min-height: 40px;
	display: flex;	
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	gap: 10px;
	padding: 8px;
}
.locale-switcher {
	background-color: var(--button-color);
	border: 1px solid var(--border-color);
	padding: 5px 10px;
}
.icon-locale {
	color: var(--button-color);
	font-size: 20px;
}
.icon-warning {
	color: var(--warning-color);
	font-size: 26px;
}
.icon-toggle {
	color: var(--button-color);
	font-size: 26px;
}
.icon-toggle.active {
	color: var(--button-pressed);
	font-size: 26px;
}
.header-container {
	display: flex;  
	flex-direction: column;
    width: 100%;
	margin-top: 10px;	
	padding: 10px 20px 20px;
	gap: 20px;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	background: var(--header-color);
}
.settings-container {
	display: flex;  
	flex-direction: column;
    width: 100%;
	margin-top: 10px;	
	padding: 10px 20px 20px;
	gap: 20px;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	background: var(--panel-color);
}
.sub-settings-container {
	display: flex;  
	flex-direction: row;
	gap: 20px;
	align-items: center;
}
.container {
	display: flex;
    width: 100%;
	margin-top: 10px;	
	margin-bottom: 10px;
	gap: 20px;
}
.panel {
	flex-grow: 1;
	overflow: auto; 		
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
	border-radius: 2px;	
}
.panel-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding-left: 10px;
	background: var(--header-color);	
	height: 40px;
}
.panel-warning {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	padding: 20px;
	background: var(--warning-bg-color);	
	min-height: 40px;
	height: auto; 
}
.warning-text {
	white-space: pre-line;
}
.toggle-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 20px;
}
.panel-content {
	background: var(--panel-color);
	padding: 10px 20px 20px;
	height: calc(100% - 40px);
}
.left-panel {
	width: 40%;
	min-width: 400px;
	resize: horizontal;
}
.right-panel {
	width: 60%;
}
.tab-content {
	display: none;
	border-top: none;
	height: 500px;
}
.textarea-container {
	position: relative;
	height: 100%;
	width: 100%;
	font-family: monospace;
    line-height: 1.5; /* Consistent line height is crucial */
    border: 1px solid #ccc;
	overflow: auto;
}
.textarea-tree {
	display:inline-block;
	padding: 5px;
	margin-left: 30px;
	width: calc(100% - 30px);
	height: 100%;
    outline: none; /* Remove default contenteditable border/outline */
    white-space: pre-wrap; /* Preserve formatting and wrap lines */
    word-wrap: break-word;
}
.textarea-linenumbers {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 30px;
	padding: 5px;
	text-align: right;
    color: #888;
    background-color: #f7f7f7;
    user-select: none; /* Prevent users from selecting line numbers */
}
/* Override the jqtree element to add the wrap setting for the note management */
ul.jqtree-tree .jqtree-element  {
	flex-wrap: wrap;
}
/* Override the color of the title depending on conditions */ 
ul.jqtree-tree .jqtree-title {
	color: var(--font-color);
}
ul.jqtree-tree .jqtree-title.new-entry {
	color: var(--font-new-entry-color);	
	font-weight: bold;
}
ul.jqtree-tree .jqtree-title.invalid-entry {
	color: var(--font-invalid-entry-color);	
	font-weight: bold;
}
/* Override the selected element colors */
ul.jqtree-tree li.jqtree-selected > .jqtree-element,
ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {
	background: linear-gradient(var( --selected-gradient-color1), var( --selected-gradient-color2));
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Override the dragged element colors */
ul.jqtree-tree .jqtree-moving > .jqtree-element .jqtree-title {
	outline: dashed 1px var(--dragged-color);
}
ul.jqtree-tree span.jqtree-border {
	border: solid 2px var(--dragged-color);
}
ul.jqtree-tree li.jqtree-ghost span.jqtree-line {
    background-color: var(--dragged-color);
}
ul.jqtree-tree li.jqtree-ghost span.jqtree-circle {
	border: solid 2px var(--dragged-color);
}
.dropdown {
	background-color: var(--button-color);
	border: 1px solid var(--border-color);
	margin-top: 5px;	
	padding: 5px 10px;
}
.input-field[type=number] {
	background-color: var(--button-color);
	border: 1px solid var(--border-color);
	margin-top: 5px;	
	padding: 5px 10px;
}
.input-field[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.action-button {
	background-color: var(--button-color);
	border: 1px solid var(--border-color);
	padding: 10px 20px;
	margin-bottom: 10px;	
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.action-button:hover {
	background-color: var(--button-hover);
}
.action-button:active {
	background-color: var(--button-pressed);
	transform: translateY(2px); /* Slight press effect */
}
.hyperlink-btn {
	display: none;
	width: 16px;
	height: 16px;
    margin-left: 3px;
	padding-top: 1px;	
	padding-right: 1px;
	border: 1px solid var(--border-color);
	background-color: var(--button-color);	
	font-size: 12px; /* icon size */
	text-align: center; /* align icon */
}
.hyperlink-btn::before {
	display: inline-block;	
    text-rendering: auto;
  	-webkit-font-smoothing: antialiased;
	color: var(--button-pressed); /* icon color */	
}
.hyperlink-btn.add::before {
	font: var(--fa-font-solid);	
	content: '\2b'; /* fa-plus icon code */ 
}
.hyperlink-btn.remove::before {
	font: var(--fa-font-solid);	
	content: '\f1f8'; /* fa-trash icon code */ 
}
.hyperlink-btn.note::before {
	font: var(--fa-font-regular);	
	content: '\f249'; /* note-sticky icon code */ 
}
.notation-number{
	font-weight: bold;
}
.node-note{
	font-style: italic;
	flex-basis: 100%;
	margin-left: 50px;
}
.jqtree-element:hover >.hyperlink-btn {
	display: block;
}
/* -----------------------------
    	SWITCH VISUAL 
----------------------------- */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--button-color);
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: var(--button-pressed);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--button-pressed);
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}