@font-face {
	font-family: "Chicago";
	src: url("font/Chicago.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Nouveau IBM";
	src: url("font/Nouveau_IBM.woff") format("woff");
	font-style: normal;
	font-display: swap;
	font-size: 12pt;
}

@font-face {
	font-family: "National Park";
	src: url("font/NationalPark-Regular.woff") format("woff");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Josefin Sans";
	src: url("font/JosefinSans.ttf") format("truetype");
	font-style: normal;
	font-display: swap;
}

html {
	--fontFace: Chicago, Arial, sans-serif;
	--fontSizeSmall: 11px;
	--fontSizeDefault: 12px;
	--fontSizeMedium: 14px;
	--fontSizeLarge: 16px;
	--bgColor1: #706b3b;
	--bgColor2: #614d2c;
	--bgColor3: #61594e;
	--bgColor4: #806b4b;
	--fgColor1: #f0b041;
	--fgColor2: #e0a031;
	--fgColor3: #db931f;
	--menuBarBottomBorder: 1px solid #565656;
	--tabSelectedBgColor: #453c2e;
	--tabUnselectedBgColor: #292621;
	--tabSelectedFgColor: #db931f;
	--tabUnselectedFgColor: #a67b37;
	--rowOddBgColor: #383137;
	--rowEvenBgColor: #525049;
	--buttonBorder: 1px solid #dba418;
	--codeBgColor: #524320;
	--codeFgColor: #f7b314;
	--codeFontSize: 12pt;
	--codeFontFace: "Nouveau IBM", courier, monospace;
	--promptBgColor: #615c53;
	--promptFontSize: 16px;
	--promptShadow: 3px 3px rgba(0,0,0,0.2);
	--promptBorder: 1px solid black;
	--waveformOverlayColor: #4c464e;
	--scrollbarColor: #e8bb54 #57451b;
	--waveformPlayheadColor: #FF2222;
	--waveformCoverColor: #232323;
	--waveformCoverOpacity: 0.5;
	--waveformMarkerColor: #edea2b;
	--waveformMarkerRunnerColor: #919171;
	--waveformCrossfadeWidth: 1px;
	--waveformCrossfadeLineColor: #bfbfbf;
	--waveformSelectOpacity: 0.5;
	--waveformSelectColor: #772222;
	--waveformLocationColor: #e0c496;
	--waveformBgColor: #332b1f;
	--waveformFgColor: #d18502;
	--waveformGridColor: rgb(227, 206, 154, 0.2);
	--waveformGridTextColor: rgb(240, 190, 65, 0.5);
	--waveformChannelLineColor: rgb(87, 87, 87, 0.7);
	--waveformTimeBarBgColor: #806b4b;
	--waveformTimeBarFgColor: #f0b041;
	--iconFilter: brightness(0) saturate(100%) invert(78%) sepia(77%) saturate(923%) hue-rotate(334deg) brightness(89%) contrast(88%);
}

html.themeBasic {
	--fontFace: "Josefin Sans", Arial, sans-serif;
	--fontSizeSmall: 10pt;
	--fontSizeDefault: 11pt;
	--fontSizeMedium: 14pt;
	--fontSizeLarge: 16pt;
	--bgColor1: #a1a1cf;
	--bgColor2: #9898a8;
	--bgColor3: #8989b1;
	--bgColor4: #bdbdff;
	--fgColor1: #000000;
	--fgColor2: #555555;
	--fgColor3: #343445;
	--menuBarBottomBorder: 1px solid #bdbdbd;
	--tabSelectedBgColor: #7878bd;
	--tabUnselectedBgColor: #5656aa;
	--tabSelectedFgColor: #000000;
	--tabUnselectedFgColor: #777777;
	--rowOddBgColor: #a9a9c9;
	--rowEvenBgColor: #9999a9;
	--buttonBorder: 1px solid #343434;
	--codeBgColor: #9999ff;
	--codeFgColor: #121212;
	--codeFontSize: 12pt;
	--codeFontFace: courier, monospace;
	--promptBgColor: #8585ff;
	--promptFontSize: 12pt;
	--promptShadow: 3px 3px rgba(0,0,50,0.3);
	--promptBorder: 1px solid #5555aa;
	--waveformOverlayColor: #4c464e;
	--scrollbarColor: #ffffff #444499;
	--waveformPlayheadColor: #FF2222;
	--waveformCoverColor: #232323;
	--waveformCoverOpacity: 0.5;
	--waveformMarkerColor: #edea2b;
	--waveformMarkerRunnerColor: #919171;
	--waveformCrossfadeWidth: 1px;
	--waveformCrossfadeLineColor: #3434ff;
	--waveformSelectOpacity: 0.5;
	--waveformSelectColor: #772222;
	--waveformLocationColor: #000000;
	--waveformBgColor: #fcf6de;
	--waveformFgColor: #222266;
	--waveformGridColor: rgb(0, 0, 0, 0.2);
	--waveformGridTextColor: rgb(0, 0, 0, 0.5);
	--waveformChannelLineColor: rgb(0, 0, 0, 0.7);
	--waveformTimeBarBgColor: #ffffff;
	--waveformTimeBarFgColor: #000000;
	--iconFilter: invert(17%) sepia(31%) saturate(2452%) hue-rotate(208deg) brightness(96%) contrast(88%);
}

html.themeHacker {
	--fontFace: "Nouveau IBM", monospace, Courier, sans-serif;
	--fontSizeSmall: 10pt;
	--fontSizeDefault: 12pt;
	--fontSizeMedium: 14pt;
	--fontSizeLarge: 16pt;
	--bgColor1: #323232;
	--bgColor2: #434343;
	--bgColor3: #010101;
	--bgColor4: #344534;
	--fgColor1: #44ee44;
	--fgColor2: #66cc66;
	--fgColor3: #009900;
	--menuBarBottomBorder: 1px solid #bbbbbb;
	--tabSelectedBgColor: #454545;
	--tabUnselectedBgColor: #232323;
	--tabSelectedFgColor: #44bb44;
	--tabUnselectedFgColor: #229922;
	--rowOddBgColor: #232323;
	--rowEvenBgColor: #343434;
	--buttonBorder: none;
	--codeBgColor: #000000;
	--codeFgColor: #0000ab;
	--codeFontSize: 12pt;
	--codeFontFace: "Nouveau IBM", courier, monospace;
	--promptBgColor: #000000;
	--promptFontSize: 14pt;
	--promptShadow: 5px 5px rgba(0,50,0,0.2);
	--promptBorder: 1px solid white;
	--waveformOverlayColor: #4c464e;
	--scrollbarColor: #000000 #005500;
	--waveformPlayheadColor: #FF2222;
	--waveformCoverColor: #232323;
	--waveformCoverOpacity: 0.5;
	--waveformMarkerColor: #ed2bed;
	--waveformMarkerRunnerColor: #545454;
	--waveformCrossfadeWidth: 1px;
	--waveformCrossfadeLineColor: #989898;
	--waveformSelectOpacity: 0.5;
	--waveformSelectColor: #227722;
	--waveformLocationColor: #000000;
	--waveformBgColor: #121212;
	--waveformFgColor: #00aa00;
	--waveformGridColor: rgb(90, 90, 90, 0.2);
	--waveformGridTextColor: rgb(120, 170, 120, 0.5);
	--waveformChannelLineColor: rgb(120, 120, 120, 0.7);
	--waveformTimeBarBgColor: #446644;
	--waveformTimeBarFgColor: #000000;
	--iconFilter: invert(41%) sepia(18%) saturate(1917%) hue-rotate(62deg) brightness(104%) contrast(90%);
}

html.themeMonoclassic {
	--fontFace: Chicago, Arial, sans-serif;
	--fontSizeSmall: 11px;
	--fontSizeDefault: 12px;
	--fontSizeMedium: 14px;
	--fontSizeLarge: 16px;
	--bgColor1: #ffffff;
	--bgColor2: #eeeeee;
	--bgColor3: #dddddd;
	--bgColor4: #cccccc;
	--fgColor1: #000000;
	--fgColor2: #111111;
	--fgColor3: #222222;
	--menuBarBottomBorder: 1px solid #000000;
	--tabSelectedBgColor: #ffffff;
	--tabUnselectedBgColor: #cccccc;
	--tabSelectedFgColor: #000000;
	--tabUnselectedFgColor: #555555;
	--rowOddBgColor: #ffffff;
	--rowEvenBgColor: #eeeeee;
	--buttonBorder: 1px solid #000000;
	--codeBgColor: #ffffff;
	--codeFgColor: #000000;
	--codeFontSize: 12pt;
	--codeFontFace: "Nouveau IBM", courier, monospace;
	--promptBgColor: #ffffff;
	--promptFontSize: 16px;
	--promptShadow: 3px 3px rgba(0,0,0,0.2);
	--promptBorder: 1px solid black;
	--waveformOverlayColor: #bbbbbb;
	--scrollbarColor: #000000 #ffffff;
	--waveformPlayheadColor: #000000;
	--waveformCoverColor: #dddddd;
	--waveformCoverOpacity: 0.5;
	--waveformMarkerColor: #444444;
	--waveformMarkerRunnerColor: #dddddd;
	--waveformCrossfadeWidth: 1px;
	--waveformCrossfadeLineColor: #333333;
	--waveformSelectOpacity: 0.5;
	--waveformSelectColor: #666666;
	--waveformLocationColor: #111111;
	--waveformBgColor: #ffffff;
	--waveformFgColor: #000000;
	--waveformGridColor: rgb(20, 20, 20, 0.2);
	--waveformGridTextColor: rgb(20, 10, 20, 0.5);
	--waveformChannelLineColor: rgb(10, 10, 10, 0.7);
	--waveformTimeBarBgColor: #dddddd;
	--waveformTimeBarFgColor: #444444;
	--iconFilter: none;
}

html.themeDoze {
	--fontFace: "Trebuchet MS", Arial, sans-serif;
	--fontSizeSmall: 8pt;
	--fontSizeDefault: 10pt;
	--fontSizeMedium: 14pt;
	--fontSizeLarge: 16pt;
	--bgColor1: #8f8f8f;
	--bgColor2: #7f7f7f;
	--bgColor3: #6f6f6f;
	--bgColor4: #5f5f5f;
	--fgColor1: #000000;
	--fgColor2: #171717;
	--fgColor3: #212121;
	--menuBarBottomBorder: 1px solid #000000;
	--tabSelectedBgColor: #acacac;
	--tabUnselectedBgColor: #6a6a6a;
	--tabSelectedFgColor: #000000;
	--tabUnselectedFgColor: #555555;
	--rowOddBgColor: #acacac;
	--rowEvenBgColor: #919191;
	--buttonBorder: 1px solid #767676;
	--codeBgColor: #000000;
	--codeFgColor: #f5d151;
	--codeFontSize: 12pt;
	--codeFontFace: "Nouveau IBM", courier, monospace;
	--promptBgColor: #8f8f8f;
	--promptFontSize: 16pt;
	--promptShadow: 6px 6px rgba(0,0,0,0.2);
	--promptBorder: 1px solid #707070;
	--waveformOverlayColor: #bbbbbb;
	--scrollbarColor: #949494 #c2c2c2;
	--waveformPlayheadColor: #bb0000;
	--waveformCoverColor: #dddddd;
	--waveformCoverOpacity: 0.5;
	--waveformMarkerColor: #f0c93e;
	--waveformMarkerRunnerColor: #9e8e55;
	--waveformCrossfadeWidth: 1px;
	--waveformCrossfadeLineColor: #79a1b0;
	--waveformSelectOpacity: 0.5;
	--waveformSelectColor: #eff77c;
	--waveformLocationColor: #bb0000;
	--waveformBgColor: #2c304d;
	--waveformFgColor: #485ce0;
	--waveformGridColor: rgb(20, 20, 20, 0.2);
	--waveformGridTextColor: rgb(20, 10, 20, 0.5);
	--waveformChannelLineColor: rgb(10, 10, 10, 0.7);
	--waveformTimeBarBgColor: #949494;
	--waveformTimeBarFgColor: #c2c2c2;
	--iconFilter: none;
}
select {
	background-color: var(--bgColor3);
	color: var(--fgColor2);
}

input {
	background-color: var(--bgColor3);
	color: var(--fgColor2);
}

.twirl_contextmenu {
	position: absolute;
	background-color: var(--bgColor3);
	border: var(--menuBarBottomBorder);
	color: var(--fgColor1);
	cursor: arrow;
	display: none;
	user-select: none;
	z-index: 30;
	opacity: 0.9;
	padding: 2px;
}

.twirl_contextmenu_item {
	font-size: var(--fontSizeDefault);
}

.twirl_contextmenu_item:hover {
	color: var(--bgColor1);
	background-color: var(--fgColor2);
}

.twirl_slider {
	appearance: none;
	outline: none;
	background-color: var(--bgColor3);
	background: var(--bgColor3);
	accent-color: var(--fgColor2);
}

.twirl_transparentinput {
	font-size: var(--fontSizeDefault);
	background-color: var(--bgColor2);
	color: var(--fgColor3);
	border: none;
}

.twirl_tf_container {
	font-size: var(--fontSizeSmall);
	font-family: var(--fontFace);
}

.twirl_tf_row_odd {
	background-color: var(--rowOddBgColor);
}

.twirl_tf_row_even {
	background-color: var(--rowEvenBgColor);
}

.twirl_tf_cell_plainbg {
	background-color: var(--bgColor4);
}

.twirl_tf_cell {
	font-size: var(--fontSizeDefault);
}

.twirl_tf_cell_text {
	font-size: var(--fontSizeDefault);
	text-align: right;
}

.twirl_tf_cellfixed {
	overflow: hidden;
	width: 40px;
}

.twirl_tf_header {
	background-color: var(--bgColor4);
	font-size: var(--fontSizeDefault);
	font-weight: bold;
}

.twirl_spline_overlay {
	position: absolute;
	width: 100%;
	top: 0px;
	bottom: 0px;
	left: 0px;
}

.twirl_tooltip {
	position: absolute;
	text-align: center;
	border-radius: 5px;
	pointer-events: none;
	padding: 2px;
	color: #000000;
	opacity: 0;
	font-family: var(--fontFace);
	font-size: var(--fontSizeSmall);
	text-shadow: 1px 1px #ffffff;
	z-index: 210;
}

#twirl_prompt {
	z-index: 201;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: none;
}

#twirl_prompt_background {
	z-index: 202;
	background-color: #ffffff;
	opacity: 0.3;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

#twirl_prompt_inner {
	z-index: 204;
	margin: 0px;
	padding: 10px;
	position: absolute;
	font-size: var(--promptFontSize);
	background-color: var(--promptBgColor);
	border: var(--promptBorder);
	box-shadow: var(--promptShadow);
	width: 40%;
	min-height: 30%;
	left: 30%;
	top: 35%;
	text-align: center;
	overflow: auto;
	scrollbar-color: var(--scrollbarColor);
}

#twirl_prompt_button_text {
	font-size: var(--fontSizeMedium);
	padding: 5px;
}

#twirl_loading {
	position: fixed;
	display: none;
	z-index: 161;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

#twirl_loading_background {
	position: absolute;
	z-index: 162;
	background-color: #ffffff;
	opacity: 0.2;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

#twirl_loading_inner {
	z-index: 163;
	position: absolute;
	font-size: var(--promptFontSize);
	background-color: var(--promptBgColor);
	border: var(--promptBorder);
	box-shadow: var(--promptShadow);
	text-align: center;
	width: 50%;
	height: 20%;
	left: 25%;
	top: 40%;
}

#twirl_loading_percent {
	z-index: 163;
	position: absolute;
	top: 80%;
	left: 10%;
	width: 80%;
	height: 10%;
	background-color: #9e8c6d;
}

#twirl_loading_percent_inner {
	z-index: 163;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 1%;
	background-color: #e0c494;
}

.twirl_icon {
	cursor: pointer;
	filter: var(--iconFilter);
}

.topmenu {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--bgColor1);
	border-bottom: var(--menuBarBottomBorder);
	color: var(--fgColor2);
	cursor: arrow;
	user-select: none;
	z-index: 40;
}

.topmenu_item {
	float: left;
	font-size: var(--fontSizeDefault);
	text-align: center;
	padding: 2px 5px;
	z-index: 40;
}

.topmenu_item:hover {
	color: var(--bgColor1);
	background-color: var(--fgColor2);
}

.topmenu_dropdown {
	display: none;
	border: 1px solid black;
	position: fixed;
	margin: 2px -5px;
	background-color: var(--bgColor1);
	color: var(--fgColor2);
	min-width: 160px;
	padding-top: 0px;
	padding-left: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 40;
}

.topmenu_dropdown_item {
	text-align: left;
	z-index: 40;
}

.topmenu_dropdown_item_disabled {
	text-align: left;
	color: #666666;
	font-style: italic;
	z-index: 40;
}

.topmenu_dropdown .topmenu_dropdown_item:hover {
	background-color: #000000;
}

.topmenu_dropdown_itemright {
	float: right;
}

ul, .twirl_treeview_treelist {
  list-style-type: none;
  font-size: var(--fontSizeSmall);
  border-bottom: 1px solid #878787;
}

.twirl_treeview_treelist {
  margin: 0;
  padding: 0;
}

.twirl_treeview_caret {
  cursor: pointer;
  font-size: var(--fontSizeDefault);
  user-select: none;
}

.twirl_treeview_caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.twirl_treeview_caret-down::before {
  transform: rotate(90deg);
}

.twirl_treeview_nested {
	margin-left: 20px;
	display: none;
}
.twirl_treeview_active {
  display: block;
} 

body {
	font-family: var(--fontFace);
	color: var(--fgColor1);
	user-select: none;
	cursor: arrow;
}

#twigs_playhead {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	width: 1px;
	background-color: var(--waveformPlayheadColor);
	border: 1px solid var(--waveformPlayheadColor);
	pointer-events: none;
	z-index: 23;
	display: none;
}

#twigs_main {
	position: absolute;
	top: 20px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

#twigs_options {
	position: absolute;
	bottom: 0px;
	left: 60px;
	right: 0px;
	height: 20%;
	background-color: var(--bgColor1);
}

#twigs_editor {
	position: absolute;
	top: 0px;
	bottom: 20%;
	left: 60px;
	right: 0px;
}

#twigs_editor_inner {
	position: absolute;
	top: 0px;
	bottom: 20px;
	left: 0px;
	right: 20px;
}

#twigs_selection {
	position: absolute;
	left: 0px;
	right: 0px;
	height: 0px;
	width: 0px;
	display: none;
	background-color: var(--waveformSelectColor);
	opacity: var(--waveformSelectOpacity);
	z-index: 15;
}

#twigs_editor_vscrollouter {
	position: absolute;
	top: 0px;
	bottom: 80px;
	width: 20px;
	right: 0px;
	background-color: var(--waveformTimeBarBgColor);
}

#twigs_editor_vscrollinner {
	position: absolute;
	left: 4px;
	right: 4px;
	top: 0px;
	bottom: 0px;
	background-color: var(--waveformTimeBarFgColor);
}

#twigs_editor_vzoom {
	position: absolute;
	right: 0px;
	bottom: 20px;
	height: 60px;
	width: 20px;
	background-color: var(--bgColor3);
}

#twigs_editor_hzoom {
	position: absolute;
	background-color: var(--bgColor3);
	right: 0px;
	bottom: 0px;
	width: 80px;
	height: 20px;
}

#twigs_editor_hscrollouter {
	position: absolute;
	height: 20px;
	bottom: 0px;
	left: 0px;
	right: 80px;
	background-color: var(--waveformTimeBarBgColor);
}

#twigs_editor_hscrollinner {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0px;
	right: 0px;
	background-color: var(--waveformTimeBarFgColor);
}

#twigs_sidebar {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	width: 60px;
	background-color: var(--bgColor1);
}

#twigs_start {
	z-index: 300;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: var(--bgColor2);
	cursor: pointer;
}

#twigs_startinner {
	z-index: 202;
	text-align: centre;
	margin: 0px;
	position: absolute;
	top: 20%;
	left: 20%;
	width: 60%;
	height: 40%;
}

#twigs_startbig {
	font-size: 48pt;
}

#twigs_menubar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	right: 0px;
	height: 20px;
	z-index: 40;
}

#twigs_hidden_links {
	display: none;
}
body {
	font-family: var(--fontFace);
	background-color: #000000;
	color: var(--fgColor1);
	user-select: none;
	cursor: arrow;
}

#twist_hidden_links {
	display: none;
}

#twist_crash {
	font-family: "Nouveau IBM";
	background-color: #b3240b;
	color: #e8dedc;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	z-index: 666;
	user-select: none;
	cursor: not-allowed;
	display: none;
}

#twist_scriptstop {
	display: none;
}

#twist_menubar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	right: 0px;
	height: 20px;
	z-index: 6;
}

a {
	color: var(--fgColor3);
	font-weight: bold;
	text-decoration: none;
}

#twist_welcome {
	display: none;
	font-size: var(--fontSizeDefault);
}

#twist_main {
	position: absolute;
	z-index: 5;
	background-color: var(--bgColor1);
	left: 0px;
	top: 20px;
	width: 100%;
	bottom: 0px;
}

.waveform {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#twist_views {
	position: absolute;
	left: 15%;
	right: 0px;
	top: 0px;
	height: 50%;
}

#twist_analyser {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 40%;
	width: 100%;
	background-color: var(--bgColor1);
	display: none;
}

#twist_waveforms {
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	width: 100%;
}

#twist_splines {
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 100%;
	display: none;
	z-index: 20;
	background-color: var(--waveformOverlayColor);
	opacity: 0.5;
}

.twist_scope {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.waveform_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--waveformOverlayColor);
	opacity: 0.95;
	left: 0px;
	top: 0px;
	z-index: 30;
}

.waveform_overlay_mid {
	font-size: 12pt;
	padding-top: 100px;
	text-align: center;
}


#twist_sidepane {
	position: absolute;
	background-color: var(--bgColor3);
	left: 0px;
	top: 0px;
	height: 100%;
	width: 15%;
	overflow-y: scroll;
	overflow-x: auto;
	scrollbar-color: var(--scrollbarColor);
}

#twist_controls {
	position: absolute;
	background-color: var(--bgColor1);
	left: 15%;
	top: 50%;
	bottom: 0px;
	right: 0px;
}

#twist_controls_inner {
	position: absolute;
	background-color: var(--bgColor4);
	left: 0px;
	top: 70px;
	bottom: 0px;
	width: 100%;
	overflow-y: scroll;
	overflow-x: auto;
	scrollbar-color: var(--scrollbarColor);
}

#twist_wavecontrols {
	position: absolute;
	overflow: hidden;
	left: 0px;
	top: 0px;
	height: 70px;
	width: 100%;
}

#twist_waveform_tabs {
	cursor: pointer;
}

#twist_help {
	z-index: 60;
	position: absolute;
	background-color: var(--bgColor1);
	opacity: 0.9;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow-y: scroll;
	overflow-x: auto;
	scrollbar-color: var(--scrollbarColor);
	display: none;
	cursor: pointer;
}

#twist_panetree {
	font-size: var(--fontSizeDefault);
	font-family: var(--fontFace);
}

button {
	border: var(--buttonBorder);
	font-color: var(--fgColor3);
	color: var(--fgColor3);
	background-color: var(--bgColor4);
	font-size: var(--fontSizeDefault);
	padding: 2px;
	font-family: var(--fontFace);
	white-space: nowrap;
}

select {
	background-color: var(--bgColor2);
	color: var(--fgColor2);
}

input[type="checkbox"] {
	accent-color: var(--bgColor1);
}

.automate_container {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 125;
	display: none;
}
	
.twist_devcode {
	background-color: var(--codeBgColor);
	color: var(--codeFgColor);
	font-size: var(--codeFontSize);
	font-family: var(--codeFontFace);
	width: 80%;
	height: 20%;
}

#twist_scriptsource {
	height: 60%;
	overflow-y: auto;
	overflow-x: hide;
}

#twist_developer {
	overflow-y: auto;
	overflow-x: hide;
}

.fullscreen_overlay {
	position: fixed;
	display: none;
	z-index: 60;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: var(--bgColor3);
	font-size: var(--fontSizeDefault);
	opacity: 0.96;
}

#twist_start {
	z-index: 300;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: var(--bgColor2);
	cursor: pointer;
}

#twist_start_invoke {
	z-index: 202;
	text-align: centre;
	margin: 0px;
	position: absolute;
	top: 20%;
	left: 20%;
	width: 60%;
	height: 40%;
}

#twist_start_invokebig {
	font-size: 48pt;
}

.wtab_selected {
	font-size: var(--fontSizeDefault);
	font-weight: bold;
	background-color: var(--tabSelectedBgColor);
	color: var(--tabSelectedFgColor);
	padding: 3px;
	border: 1px solid black;
	border-top: 0;
}

.wtab_unselected {
	font-size: var(--fontSizeDefault);
	background-color: var(--tabUnselectedBgColor);
	color: var(--tabUnselectedFgColor);
	font-weight: normal;
	padding: 3px;
	border: 1px solid black;
}


#twist {
	display: none;
}

#twigs {
	display: none;
}

#twine_start {
	z-index: 300;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: var(--bgColor2);
	cursor: pointer;
}

#twine_startinner {
	z-index: 202;
	text-align: centre;
	margin: 0px;
	position: absolute;
	top: 20%;
	left: 20%;
	width: 60%;
	height: 40%;
}

#twine_mixer {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-color: var(--scrollbarColor);
}

#twine_startbig {
	font-size: 48pt;
}

td {
	font-size: var(--fontSizeSmall);
}

body {
	font-family: var(--fontFace);
	color: var(--fgColor1);
	font-size: var(--fontSizeDefault);
	user-select: none;
	cursor: arrow;
	font-size: 11pt;
}

#twine_menubar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	right: 0px;
	height: 20px;
	z-index: 6;
}

.slider {
	background: var(--bgColor3);
	accent-color: var(--fgColor2);
}

#twine_timeline_playposition {
	position: absolute;
	width: 1px;
	opacity: 0.8;
	top: 0px;
	bottom: 0px;
	left: 0px;
	background-color: var(--waveformPlayheadColor);
	z-index: 50;
	display: none;
}

.twine_timelinetext {
	font-size: var(--fontSizeSmall);
	opacity: 0.9;
	position: absolute;
	color: var(--fgColor3);
	top: 2px;
	z-index: 4;
}

#twine_timeline_channeloverlay {
	position: absolute;
	left: 10%;
	right: 0px;
	top: 0px;
	height: 100%;
	user-select: none;
	pointer-events: none;
}

.twine_vline {
	position: absolute;
	width: 1px;
	opacity: 0.8;
	background-color: #bdbdbd;
	height: 100%;
	z-index: 4;
}



#twine_timeline {
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 30%;
	right: 0px;
	background-color: #dadada;
}

#twine_main {
	position: absolute;
	top: 50px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

#twine_header {
	position: absolute;
	top: 20px;
	height: 30px;
	left: 0px;
	width: 100%;
	background-color: var(--bgColor1);
	overflow: none;
}

.knoblabel {
	font-size: 8pt;
	text-align: center;
}

#twine_timelineoverlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 10%;
	top: 0px;
	z-index: 50;
	display: none;
}

#twine_details {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 30%;
	background-color: var(--bgColor1);
}

.twine_clipdetailsleft {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 30%;
	height: 100%;
	font-size: var(--fontSizeSmall);
	background-color: var(--bgColor2);
}

.twine_clipdetailsright {
	position: absolute;
	left: 30%;
	top: 0px;
	width: 70%;
	height: 100%;
	background-color: var(--bgColor3);
}

#twine_headertable {
	height: 30px;
}

#twine_clipdetails {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: none;
}

#twine_channeldetails {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: none;
	overflow-x: auto;
	scrollbar-color: var(--scrollbarColor);
}

.twine_channeldetails_insert {
	position: absolute;
	font-size: var(--fontSizeSmall);
	width: 500px;
	border-left: 1px solid var(--fgColor3);
	height: 100%;
	top: 0px;
	bottom: 0px;
	overflow-y: auto;
	background-color: var(--bgColor1);
	scrollbar-color: var(--scrollbarColor);
}

.twine_channeldetails_inserts {
	position: absolute;
	left: 200px;
	right: 0px;
	height: 100%;
	top: 0px;
	overflow-y: scroll;
	background-color: var(--bgColor2);
	scrollbar-color: var(--scrollbarColor);
}

.twine_channeldetails_insertnew {
	position: absolute;
	width: 200px;
	height: 100%;
	top: 0px;
	bottom: 0px;
	overflow-y: auto;
	background-color: var(--bgColor3);
	scrollbar-color: var(--scrollbarColor);
}

.drag_selection {
	position: absolute;
	background-color: #323232;
	opacity: 0.5;
	user-select: none;
	z-index: 101;
}

#twine_timeline_timebar {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 20px;
	right: 0px;
	background-color: var(--bgColor2);
	z-index: 4;
}

#twine_timeline_timebar_inner {
	position: absolute;
	left: 10%;
	top: 0px;
	height: 20px;
	right: 0px;
	cursor: text;
	z-index: 4;
}

.twine_timeline_timebar_locatorhead {
	position: absolute;
	/*width: 14px;
	border-radius: 0px 0px 4px 4px;
	background-color: var(--waveformLocationColor);
	height: 100%;
	*/
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 14px solid var(--waveformLocationColor);
	top: 0px;
	opacity: 0.6;
	cursor: ew-resize;
	z-index: 5;
}

.twine_timeline_timebar_locatorline {
	position: absolute;
	width: 1px;
	background-color: var(--waveformLocationColor);
	height: 100%;
	top: 0px;
	width: 2px;
	opacity: 0.6;
	pointer-events: none;
}

.twine_timeline_timebar_regionstart {
	position: absolute;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 14px solid var(--waveformMarkerColor);
	top: 0px;
	opacity: 0.6;
	cursor: ew-resize;
	z-index: 5;
}

.twine_timeline_timebar_regionend {
	position: absolute;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 14px solid var(--waveformMarkerColor);
	top: 0px;
	opacity: 0.6;
	cursor: ew-resize;
	z-index: 5;
}


#twine_timeline_inner {
	position: absolute;
	left: 0px;
	top: 20px;
	bottom: 20px;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-color: var(--scrollbarColor);
}

#twine_timeline_scroll_filler {
	position: absolute;
	background-color: var(--bgColor1);
	left: 0px;
	bottom: 0px;
	width: 10%;
	height: 20px;
}

#twine_timeline_scroll_outer {
	position: absolute;
	background-color: var(--bgColor2);
	left: 10%;
	bottom: 0px;
	width: 90%;
	height: 20px;
	z-index: 7;
}

#twine_timeline_scroll_inner {
	position: absolute;
	background-color: var(--fgColor1);
	left: 0px;
	top: 4px;
	bottom: 4px;
	right: 0px;
}

.twine_channel {
	position: relative;
	left: 0px;
	right: 0px;
	top: 0px;
	height: 40px;
	font-size: var(--fontSizeSmall);
	border-bottom: 1px solid black;
}

.twine_channelclips {
	position: absolute;
	left: 10%;
	width: 90%;
	background-color: var(--bgColor3);
	height: 100%;
	top: 0px;
	overflow: hidden;
	user-select: none;
}

.twine_spline {
	position: absolute;
	width: 100%;
	left: 0px;
	height: 100%;
	top: 0px;
}

.twine_automationselectors {
	padding: 10px;
}

.twine_automationselect {
	padding: 0px;
	font-size: var(--fontSizeSmall);
}

.twine_channelcontrol {
	position: absolute;
	background-color: var(--bgColor2);
	left: 0px;
	width: 10%;
	height: 100%;
	top: 0px;
}

.twine_clip {
	user-select: none;
	position: absolute;
	left: 100px;
	width: 400px;
	z-index: 30;
	overflow: hidden;
}

.twine_clip_edge_left {
	position: absolute;
	cursor: e-resize;
	height: 100%;
	top: 0px;
	width: 5px;
	left: 0px;
}

.twine_clip_edge_right {
	position: absolute;
	cursor: e-resize;
	height: 100%;
	top: 0px;
	width: 5px;
	right: 0px;
}

.twine_clip_centre {
	position: absolute;
	cursor: move;
	height: 100%;
	top: 0px;
	left: 5px;
	right: 5px;
}