:root {
	--primary: #3daee9;
	--back: #31363b;
	--font: #eff0f1;
	--font-highlight: #8bdcfd;
	--font-hint: #898b8d;
	--font-selected-pressed: #eff0f1;
	--button-back: #30353a;
	--button-border: #6b6f73;
	--button-radius: 2dp;
	--base-horizontal-padding: 5dp;
	--base-vertical-padding: 5dp;
	--border-width: 1dp;
	--list-back: #232629;
	--separator: #31363b;
	--item-hover: #284150;
	--slider-back: #676a6e;
	--slider-button: #31363b;
	--slider-border: #787b80;
	--scrollbar-border: #373a3d;
	--scrollbar-button: #4085a9;
	--scrollbar-hback-hover: #606365;
	--tab-back: #2b3034;
	--tab-line: #616569;
	--tab-active: #31363b;
	--tab-hover: #334e5e;
	--tab-close: #909396;
	--tab-close-hover: #863d47;
	--tab-font-active: white;
	--tab-font-inactive: #c0c5cc;
	--icon: #b6bbc2;
	--icon-active: white;
	--icon-back-hover: #eff0f1;
	--icon-back-alert: #e49aa2;
	--icon-line: #dbdbdd;
	--icon-line-hover: #3d4246;
	--menu-back: #2d3136;
	--menu-font: #eff0f1;
	--menu-border: #616569;
	--menu-font-active: white;
	--menu-font-disabled: #6e7275;
	--floating-icon: #96999c;
	--term-back-color: #1e2127;
	--term-font-color: #abb2bf;
	--highlight-primary: #FFFFFF7A;
	--disabled-color: #727679;
	--disabled-border: #43474c;
	--theme-error: #ff4040;
	--theme-warning: #ffff40;
	--theme-success: #40ff40;
	droppable-hovering-color: #FFFFFF20;
}

MarkdownView {
	background-color: var(--list-back);
	padding: 4dp;
}

MarkdownView body {
	color: var(--font);
}

MarkdownView p,
MarkdownView ol,
MarkdownView ul,
MarkdownView pre,
MarkdownView blockquote {
	margin-top: 0;
}

MarkdownView ul,
MarkdownView ol {
	padding-left: 21dp;
}

MarkdownView ul ul,
MarkdownView ul ol,
MarkdownView ol ul,
MarkdownView ol ol  {
	margin-top: 0;
	margin-bottom: 0;
}

MarkdownView a {
	color: var(--primary);
	selection-color: var(--font-selected-pressed);
	selection-back-color: var(--primary);
	gravity: bottom;
}

MarkdownView a:hover {
	color: var(--font-highlight);
}

MarkdownView li > p { margin: 0; }
MarkdownView blockquote > *:first-child { margin-top: 0dp; }
MarkdownView blockquote > *:last-child { margin-bottom: 0dp; }

MarkdownView h1,
MarkdownView h2 {
	border-bottom: 1dp solid var(--tab-line);
}

MarkdownView img {
	scale-type: fit-inside;
	max-width: 100%;
	max-height: 100vh;
}

MarkdownView table > thead > tr > th {
	font-style: bold;
}

MarkdownView CodeEditor,
MarkdownView code {
	font-family: monospace;
	background-color: var(--button-back);
	font-size: 11dp;
	padding-left: 2dp;
	padding-right: 2dp;
}

pushbutton,
selectbutton,
tableview::cell,
treeview::cell,
treeview::cell::expander,
listview::cell,
tableview::header::column:hover,
treeview::header::column:hover,
listview::header::column:hover {
	color: var(--font);
	tint: var(--font);
}

tableview::row:selected tableview::cell,
treeview::row:selected treeview::cell,
listview::row:selected listview::cell,
tableview::row:selected tableview::cell,
treeview::row:selected treeview::cell,
listview::row:selected listview::cell,
tableview::row:selected tableview::cell::expander,
treeview::row:selected treeview::cell::expander,
listview::row:selected listview::cell::expander {
	color: var(--font-selected-pressed);
	tint: var(--font-selected-pressed);
}

CheckBox,
ComboBox,
ComboBox::DropDownList::ListBox::item,
DropDownList,
DropDownList::ListBox::item,
ListBox::item,
Menu::item::text,
Menu::item::shortcut,
PushButton,
RadioButton,
SelectButton,
SpinBox::input,
Tab,
TextEdit,
TextInput,
TextArea,
TextView,
Anchor,
Tooltip,
MenuBar::button,
Window::title,
ListView::cell,
table::cell,
tableview::cell,
treeview::cell,
listview::cell {
	color: var(--font);
}

TextView,
Anchor,
TextEdit,
TextArea,
TextInput,
ComboBox::DropDownList,
SpinBox::input, {
	selection-color: var(--font-selected-pressed);
	selection-back-color: var(--primary);
}

Anchor {
	cursor: arrow;
}

Anchor:hover {
	color: var(--primary);
	cursor: hand;
}

PushButton,
SelectButton,
DropDownList,
DropDownModelList {
	padding-left: var(--base-horizontal-padding);
	padding-right: var(--base-horizontal-padding);
	padding-top: var(--base-vertical-padding);
	padding-bottom: var(--base-vertical-padding);
	background-color: var(--button-back);
	border-color: var(--button-border);
	border-radius: var(--button-radius);
	border-width: var(--border-width);
	transition: all 0.125s cubic-bezier(0.77, 0.77, 0.38, 0.38);
	color: var(--font);
	tint: var(--font);
}

DropDownList,
DropDownModelList,
ComboBox::DropDownList {
	max-visible-items: 6;
}

PushButton:hover,
PushButton:focus,
DropDownList:hover,
DropDownList:focus,
DropDownModelList:hover,
DropDownModelList:focus,
SelectButton:hover,
SelectButton:focus,
ComboBox:hover,
ComboBox:focus {
	border-color: var(--primary);
}

PushButton:pressed,
SelectButton:pressed,
SelectButton:selected,
SelectButton:selected:pressed {
	background-color: var(--primary);
	color: var(--font-selected-pressed);
	tint: var(--font-selected-pressed);
}

pushbutton:disabled,
selectbutton:disabled,
textinput:disabled,
textedit:disabled,
textarea:disabled {
	color: var(--disabled-color);
	border-color: var(--disabled-border);
}

checkbox:disabled {
	color: var(--disabled-color);
}

PushButton::icon,
SelectButton::icon,
table::cell::icon,
TableView::cell::icon,
TreeView::cell::icon,
TreeView::cell::expander,
ListView::cell::icon {
	margin-right: 4dp;
}

CheckBox,
RadioButton {
	text-decoration: none;
}

CheckBox:focus,
RadioButton:focus {
	text-decoration: underline;
}

CheckBox::active,
CheckBox::inactive {
	width: 12dp;
	height: 12dp;
	border-width: 1dp;
	border-radius: var(--button-radius);
}

CheckBox::inactive {
	border-color: var(--button-border);
}

CheckBox:hover CheckBox::inactive {
	border-color: var(--primary);
}

CheckBox::active {
	border-color: var(--primary);
	background-image: rectangle(solid, var(--primary));
	background-size: 8dpru 8dpru;
	background-position: center;
}

tableview::row:selected CheckBox::active,
treeview::row:selected CheckBox::active,
listview::row:selected CheckBox::active {
	border-color: var(--highlight-primary);
	background-image: rectangle(solid, var(--highlight-primary));
}

RadioButton::active,
RadioButton::inactive {
	width: 12dp;
	height: 12dp;
	border-width: 1dp;
	border-radius: 100%;
}

RadioButton::inactive {
	border-color: var(--button-border);
}

RadioButton:hover RadioButton::inactive {
	border-color: var(--primary);
}

RadioButton::active {
	border-color: var(--primary);
	background-image: circle(solid, var(--primary));
	background-size: 8dp 8dp;
	background-position: 6dp 6dp;
}

ListBox,
DropDownList::ListBox,
ComboBox::DropDownList::ListBox,
MarkdownView Table,
ListView {
	background-color: var(--list-back);
	border-color: var(--button-border);
	border-radius: var(--button-radius);
	border-width: var(--border-width);
	transition: all 0.15;
}

ListBox::item {
	padding-left: 4dp;
	background-color: transparent;
	background-image: linear-gradient( to right, var(--list-back), var(--separator) ), linear-gradient( to right, var(--separator), var(--list-back) );
	background-size: 50% 1dp, 50% 1dp;
	background-position: left bottom, right bottom;
}

ListView::row {
	background-color: transparent;
	background-image: linear-gradient( to right, var(--list-back), var(--separator) ), linear-gradient( to right, var(--separator), var(--list-back) );
	background-size: 50% 1dp, 50% 1dp;
	background-position: left bottom, right bottom;
}

ListView::cell {
	padding-left: 4dp;
	min-icon-size: 16dp 16dp;
}

ListBox:hover,
ListView:hover,
ListBox:focus,
ListView:focus {
	border-color: var(--primary);
}

ListBox::item:hover,
ListView::row:hover {
	background-color: var(--item-hover);
}

ListBox::item:selected,
ListView::row:selected {
	background-color: var(--primary);
}

DropDownList::ListBox::item,
ComboBox::DropDownList::ListBox::item {
	padding-left: 4dp;
	background-color: transparent;
	color: var(--font);
	tint: var(--font);
}

DropDownList::ListBox::item:hover,
DropDownList::ListBox::item:selected,
ComboBox::DropDownList::ListBox::item:hover,
ComboBox::DropDownList::ListBox::item:selected {
	background-color: var(--primary);
	color: var(--font-selected-pressed);
	tint: var(--font-selected-pressed);
}

TextInput {
	padding-left: var(--base-horizontal-padding);
	padding-right: var(--base-horizontal-padding);
	padding-top: var(--base-vertical-padding);
	padding-bottom: var(--base-vertical-padding);
	background-color: var(--list-back);
	border-color: var(--button-border);
	border-radius: var(--button-radius);
	border-width: var(--border-width);
	hint-color: var(--font-hint);
	transition: all 0.15;
}

ComboBox {
	background-color: var(--list-back);
	border-color: var(--button-border);
	border-radius: var(--button-radius);
	border-width: var(--border-width);
	transition: all 0.15;
}

ComboBox::DropDownList {
	padding-left: var(--base-horizontal-padding);
	padding-right: var(--base-horizontal-padding);
	padding-top: var(--base-vertical-padding);
	padding-bottom: var(--base-vertical-padding);
}

TextInput:hover,
TextInput:focus,
SpinBox:hover,
SpinBox:focus {
	border-color: var(--primary);
}

SpinBox {
	background-color: var(--list-back);
	border-color: var(--button-border);
	border-radius: var(--button-radius);
	border-width: var(--border-width);
	transition: all 0.15;
}

SpinBox::input {
	padding-left: var(--base-horizontal-padding);
	padding-right: var(--base-horizontal-padding);
	padding-top: var(--base-vertical-padding);
	padding-bottom: var(--base-vertical-padding);
}

SpinBox::input,
SpinBox::input:hover,
SpinBox::input:focus {
	border-width: 0dp;
	border-color: transparent;
}

SpinBox::btnup,
SpinBox::btndown {
	width: 13dp;
	height: 13dp;
}

TextEdit,
TextArea {
	background-color: var(--list-back);
	border-color: var(--button-border);
	border-radius: var(--button-radius);
	border-width: var(--border-width);
	padding-left: var(--base-horizontal-padding);
	padding-right: var(--base-horizontal-padding);
	padding-top: var(--base-vertical-padding);
	padding-bottom: var(--base-vertical-padding);
	transition: all 0.15;
}

TextEdit:focus,
TextEdit:hover,
TextArea:focus,
TextArea:hover {
	border-color: var(--primary);
}

Tooltip {
	padding-left: var(--base-horizontal-padding);
	padding-right: var(--base-horizontal-padding);
	padding-top: var(--base-vertical-padding);
	padding-bottom: var(--base-vertical-padding);
	background-color: var(--button-back);
	border-color: var(--button-border);
	border-radius: var(--button-radius);
	border-width: var(--border-width);
}

Slider {
	min-width: 16dp;
	min-height: 16dp;
	half-slider: true;
}

Slider::vback {
	background-color: var(--slider-back);
	border-radius: 4dp;
	min-width: 8dp;
	transition: all 0.15s;
}

Slider::hback {
	background-color: var(--slider-back);
	border-radius: 4dp;
	min-width: 64dp;
	min-height: 8dp;
	transition: all 0.15s;
}

Slider::vbutton,
Slider::hbutton {
	background-color: var(--slider-button);
	border-color: var(--slider-border);
	border-width: 1dp;
	border-radius: 100%;
	min-width: 16dp;
	min-height: 16dp;
}

Slider::vbutton:hover,
Slider::vbutton:focus,
Slider::hbutton:hover,
Slider::hbutton:focus {
	border-color: var(--primary);
}

ScrollBar {
	scrollbar-style: no-buttons;
	min-width: 18dp;
	min-height: 18dp;
}

ScrollBar::hback {
	min-height: 6dp;
	border-radius: 3dp;
	background-color: transparent;
}

ScrollBar::vback {
	min-width: 6dp;
	border-radius: 3dp;
	background-color: transparent;
}

ScrollBar::vslider {
	padding-top: 4dp;
	padding-bottom: 4dp;
}

ScrollBar::hslider {
	padding-left: 4dp;
	padding-right: 4dp;
}

ScrollBar::hslider,
ScrollBar::vslider {
	border-width: 1dp;
	border-color: var(--scrollbar-border);
	transition: all 0.15s;
}

ScrollBar::hbutton {
	min-width: 12dp;
	min-height: 6dp;
	background-color: var(--scrollbar-button);
	border-radius: 3dp;
	border-width: 0dp;
	transition: all 0.15s;
}

ScrollBar::vbutton {
	min-width: 6dp;
	min-height: 12dp;
	background-color: var(--scrollbar-button);
	border-radius: 3dp;
	border-width: 0dp;
	transition: all 0.15s;
}

ScrollBar::hslider:hover ScrollBar::hback,
ScrollBar::vslider:hover ScrollBar::vback {
	background-color: var(--scrollbar-hback-hover);
}

ScrollBar::vslider:hover ScrollBar::vbutton,
ScrollBar::vbutton:hover,
ScrollBar::hslider:hover ScrollBar::hbutton,
ScrollBar::hbutton:hover {
	background-color: var(--primary);
}

ProgressBar {
	min-height: 9dp;
}

ProgressBar::filler {
	border-radius: 4dp;
	background-color: var(--primary);
}

TabWidget {
	tab-height: 24dp;
	gravity: left|bottom;
}

TabWidget::TabBar {
	background-image: rectangle(solid, var(--tab-line));
	background-size: 100% 1dp;
	background-position-y: bottom;
}

Tab {
	background-color: var(--tab-back);
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
	background-image: rectangle(solid, var(--tab-line));
	background-size: 100% 1dp;
	background-position-y: bottom;
	height: 24dp;
	transition: background-color 0.15s;
	foreground-image: linear-gradient( to top, var(--tab-line), var(--tab-back));
	foreground-size: 1dprd 80%;
	foreground-position: right bottom;
	color: var(--tab-font-inactive);
}

Tab.prev {
	foreground-image: none;
}

Tab:hover {
	background-color: var(--tab-hover);
	foreground-image: none;
	color: var(--font);
}

Tab::text {
	padding-left: 4dp;
	padding-right: 4dp;
}

Tab:selected {
	background-image: rectangle(solid, transparent);
	background-size: 100% 1dp;
	background-position-y: bottom;
	background-color: var(--tab-active);
	border-left-color: var(--tab-line);
	border-right-color: var(--tab-line);
	border-top-color: var(--tab-line);
	border-left-width: 1dp;
	border-right-width: 1dp;
	border-top-width: 1dp;
	border-top-left-radius: 2dp;
	border-top-right-radius: 2dp;
	foreground-image: none;
	color: var(--font);
}

Tab:selected:hover {
	background-color: var(--tab-active);
}

tab::icon {
	margin-left: 2dp;
	margin-right: 2dp;
}

Tab::close {
	width: 10dp;
	height: 10dp;
	foreground-image: url("data:image/svg,<svg width='16' height='16' viewBox='0 0 16 16'><path fill='#ffffff' fill-rule='evenodd' d='M 2.3432061,13.657206 A 8.0002061,8.0002061 0 1 1 13.657206,2.3432061 8.0002061,8.0002061 0 0 1 2.3432061,13.657206 Z m 3.687,-8.6869999 a 0.75,0.75 0 0 0 -1.06,1.06 l 1.97,1.97 -1.97,1.97 a 0.75,0.75 0 1 0 1.06,1.0599999 l 1.97,-1.9699999 1.97,1.9699999 A 0.75,0.75 0 1 0 11.030206,9.9702061 l -1.9699999,-1.97 1.9699999,-1.97 a 0.75,0.75 0 1 0 -1.0599999,-1.06 l -1.97,1.97 z' /></svg>");
	foreground-tint: var(--tab-close);
	foreground-size: 10dp 10dp;
	margin-right: 4dp;
	transition: all 0.15s;
}

Tab::close:hover {
	foreground-tint: var(--tab-close-hover);
}

Loader {
	fill-color: var(--primary);
}

CodeEditor > Loader,
code > Loader {
	background-color: #0000002d;
	radius: 32dp;
	outline-thickness: 6dp;
}

Window::close {
	width: 12dp;
	height: 12dp;
	border-radius: 6dp;
	background-color: var(--icon-back-hover);
	foreground-image: poly(line, var(--icon-line-hover), "0dp 0dp, 6dp 6dp", 1dp), poly(line, var(--icon-line-hover), "6dp 0dp, 0dp 6dp", 1dp);
	foreground-position: 3dp 3dp, 3dp 3dp;
	transition: all 0.15s;
}

Window::close:hover {
	background-color: var(--icon-back-alert);
}

Window::maximize {
	width: 12dp;
	height: 12dp;
	border-radius: 6dp;
	background-color: transparent;
	foreground-image: poly(line, var(--icon-line), "0dp 4dp, 4dp 0dp", 1dp), poly(line, var(--icon-line), "4dp 0dp, 8dp 4dp", 1dp);
	foreground-position: 2dp 4dp, 2dp 4dp;
	transition: all 0.15s;
}

Window::maximize:hover {
	background-color: var(--icon-back-hover);
	foreground-image: poly(line, var(--icon-line-hover), "0dp 4dp, 4dp 0dp", 1dp), poly(line, var(--icon-line-hover), "4dp 0dp, 8dp 4dp", 1dp);
}

Window::minimize {
	width: 12dp;
	height: 12dp;
	border-radius: 6dp;
	background-color: transparent;
	foreground-image: poly(line, var(--icon-line), "0dp 0dp, 4dp 4dp", 1dp), poly(line, var(--icon-line), "4dp 4dp, 8dp 0dp", 1dp);
	foreground-position: 2dp 4dp, 2dp 4dp;
	transition: all 0.15s;
}

Window::minimize:hover {
	background-color: var(--icon-back-hover);
	foreground-image: poly(line, var(--icon-line-hover), "0dp 0dp, 4dp 4dp", 1dp), poly(line, var(--icon-line-hover), "4dp 4dp, 8dp 0dp", 1dp);
}

Window {
	background-color: var(--back);
	window-border-size: 2dp 2dp;
	window-titlebar-size: 24dp 24dp;
	window-buttons-offset: -6dp 0dp;
	window-buttons-separation: 8dp;
	window-flags: default|shadow;
	window-shadow-offset: 0dp 0dp;
	window-shadow-size: 16dp;
}

Window::decoration {
	background-color: var(--separator);
}

Window::border::left,
Window::border::right {
	background-color: var(--separator);
}

Window::border::bottom {
	background-color: var(--separator);
}

DropDownList,
DropDownModelList {
	padding-right: 16dp;
	text-overflow: ellipsis;
}

DropDownList,
DropDownModelList,
ComboBox::Button {
	foreground-image: url("data:image/svg,<svg viewBox='0 0 24 24' fill='white'><path d='M12 15.6315L20.9679 10.8838L20.0321 9.11619L12 13.3685L3.96788 9.11619L3.0321 10.8838L12 15.6315Z'></path></svg>");
	foreground-position-x: right 6dp;
	foreground-position-y: center 1dp;
	foreground-size: 12dp 16dp;
	foreground-tint: var(--icon);
}

DropDownList:hover,
DropDownList:focus,
DropDownModelList:hover,
DropDownModelList:focus,
ComboBox::Button:focus,
ComboBox::Button:hover {
	foreground-tint: var(--icon-active);
}

ComboBox::Button {
	width: 24dp;
	height: 16dp;
}

SpinBox::btndown {
	width: 16dp;
	height: 12dp;
	foreground-image: url("data:image/svg,<svg viewBox='0 0 24 24' fill='white'><path d='M12 15.6315L20.9679 10.8838L20.0321 9.11619L12 13.3685L3.96788 9.11619L3.0321 10.8838L12 15.6315Z'></path></svg>");
	foreground-position-x: -1dp;
	foreground-position-y: center -1dp;
	foreground-size: 12dp 16dp;
	foreground-tint: var(--icon);
}

SpinBox::btndown:hover,
SpinBox::btnup:hover {
	foreground-tint: var(--primary);
}

SpinBox::btnup {
	width: 16dp;
	height: 12dp;
	foreground-image: url("data:image/svg,<svg viewBox='0 0 24 24' fill='white'><path d='M12 8.36853L20.9679 13.1162L20.0321 14.8838L12 10.6315L3.96788 14.8838L3.0321 13.1162L12 8.36853Z'></path></svg>");
	foreground-position-x: -1dp;
	foreground-position-y: center 1dp;
	foreground-size: 12dp 16dp;
	foreground-tint: var(--icon);
}

MenuBar {
	height: 18dp;
	background-color: var(--back);
}

Menu,
PopUpMenu {
	background-color: var(--menu-back);
	color: var(--menu-font);
	min-width: 150dp;
	min-icon-size: 12dp 12dp;
	border-width: 1dp;
	border-color: var(--menu-border);
}

MenuBar::Button {
	background-color: transparent;
	padding-left: 6dp;
	padding-right: 6dp;
	min-height: 18dp;
}

MenuBar::Button:selected,
MenuBar::Button:hover {
	background-color: var(--primary);
	color: var(--menu-font-active);
	tint: var(--menu-font-active);
}

Menu::Item,
Menu::CheckBox,
Menu::Separator,
Menu::SubMenu,
Menu::RadioButton {
	padding-left: 6dp;
	padding-top: 2dp;
	padding-bottom: 2dp;
	background-color: transparent;
}

Menu::Item:selected,
Menu::CheckBox:selected,
Menu::SubMenu:selected,
Menu::RadioButton:selected {
	background-color: var(--primary);
}

Menu::Item::text,
Menu::CheckBox::text,
Menu::SubMenu::text,
Menu::RadioButton::text {
	padding-right: 8dp;
	color: var(--menu-font);
}

Menu::Item::shortcut,
Menu::CheckBox::shortcut,
Menu::RadioButton::shortcut {
	padding-left: 48dp;
	padding-right: 8dp;
	color: var(--menu-font);
}

PushButton:disabled > PushButton::icon,
Menu::Item:disabled > Menu::Item::text,
Menu::Item:disabled > Menu::Item::shortcut,
Menu::Item:disabled > Menu::Item::icon,
Menu::CheckBox:disabled > Menu::CheckBox::text,
Menu::CheckBox:disabled > Menu::CheckBox::shortcut,
Menu::CheckBox:disabled > Menu::CheckBox::icon,
Menu::RadioButton:disabled > Menu::RadioButton::text,
Menu::RadioButton:disabled > Menu::RadioButton::shortcut,
Menu::RadioButton:disabled > Menu::RadioButton::icon,
Menu::SubMenu:disabled > Menu::SubMenu::text,
Menu::SubMenu:disabled > Menu::SubMenu::icon {
	color: var(--menu-font-disabled);
	tint: var(--menu-font-disabled);
}

Menu::Item:selected > Menu::Item::text,
Menu::CheckBox:selected > Menu::CheckBox::text,
Menu::RadioButton:selected > Menu::RadioButton::text,
Menu::SubMenu:selected > Menu::SubMenu::text,
Menu::Item:selected > Menu::Item::icon,
Menu::CheckBox:selected > Menu::CheckBox::icon,
Menu::RadioButton:selected > Menu::RadioButton::icon,
Menu::SubMenu:selected > Menu::SubMenu::icon,
Menu::Item:selected > Menu::Item::shortcut,
Menu::CheckBox:selected > Menu::CheckBox::shortcut,
Menu::RadioButton:selected > Menu::RadioButton::shortcut,
Menu::SubMenu:selected > Menu::SubMenu::shortcut,
ListBox::item:hover {
	color: var(--menu-font-active);
	tint: var(--menu-font-active);
}

Menu::Separator {
	height: 3dp;
	background-color: var(--button-back);
	background-image: rectangle(solid, var(--button-border));
	background-size: 100% 1dp;
	background-position: center;
}

Menu::SubMenu::Arrow {
	width: 16dp;
	height: 16dp;
	margin-right: 1dp;
	foreground-image: poly(line, var(--icon), "5dp 3dp, 10dp 8dp", 1dp), poly(line, var(--icon), "5dp 13dp, 10dp 8dp", 1dp);
}

Menu::SubMenu:hover > Menu::SubMenu::arrow {
	foreground-image: poly(line, var(--menu-font-active), "5dp 3dp, 10dp 8dp", 1dp), poly(line, var(--menu-font-active), "5dp 13dp, 10dp 8dp", 1dp);
}

Menu::Item::icon,
Menu::SubMenu::icon,
Menu::CheckBox::icon,
Menu::RadioButton::icon {
	margin-right: 4dp;
	tint: var(--font);
}

Menu::CheckBox::icon {
	max-width: 12dp;
	max-height: 12dp;
	border-width: 1dp;
	border-color: var(--button-border);
	border-radius: var(--button-radius);
	background-image: none;
	background-color: var(--menu-back);
}

Menu::CheckBox::icon:selected {
	border-color: var(--primary);
	background-image: rectangle(solid, var(--primary));
	background-size: 8dpru 8dpru;
	background-position: center;
}

Menu::RadioButton::icon {
	max-width: 12dp;
	max-height: 12dp;
	border-width: 1dp;
	border-color: var(--button-border);
	border-radius: 100%;
	background-image: none;
	background-color: var(--menu-back);
}

Menu::RadioButton::icon:selected {
	border-color: var(--primary);
	background-image: circle(solid, var(--primary));
	background-size: 8dp 8dp;
	background-position: 6dp 6dp;
}

ListBox > ScrollBar,
TextEdit > ScrollBar,
TextArea > ScrollBar,
Table > ScrollBar {
	background-color: var(--list-back);
}

Splitter::separator {
	background-color: var(--separator);
}

Splitter::separator:selected,
Splitter::separator:hover {
	background-color: var(--primary);
}

tableview::header,
listview::header,
tableview::rowheader,
listview::rowheader {
	background-color: var(--back);
}

tableview::header::column,
treeview::header::column,
listview::header::column {
	background-color: var(--back);
	border-right-color: var(--tab-line);
	border-right-width: 1dp;
	border-bottom-color: var(--tab-line);
	border-bottom-width: 1dp;
	border-type: inside;
	color: var(--font);
	padding: 2dp 6dp 2dp 6dp;
	transition: all 0.125s;
	text-align: left;
}

tableview::rowheader::row,
treeview::rowheader::row,
listview::rowheader::row {
	background-color: var(--back);
	border-right-color: var(--tab-line);
	border-right-width: 1dp;
	border-bottom-color: var(--tab-line);
	border-bottom-width: 1dp;
	border-type: inside;
	color: var(--font);
}

tableview::header::column:hover,
treeview::header::column:hover,
listview::header::column:hover,
tableview::rowheader::row:hover,
treeview::rowheader::row:hover,
listview::rowheader::row:hover {
	background-color: var(--item-hover);
}

tableview::row,
treeview::row {
	background-color: var(--list-back);
}

tableview::row:hover,
treeview::row:hover {
	background-color: var(--item-hover);
}

tableview::row:selected,
treeview::row:selected {
	background-color: var(--primary);
}

tableview.selection_type_cell tableview::row:hover,
treeview.selection_type_cell treeview::row:hover {
	background-color: transparent;
}

tableview.selection_type_cell tableview::row:selected,
treeview.selection_type_cell treeview::row:selected {
	background-color: transparent;
}

tableview.selection_type_cell tableview::cell:hover,
treeview.selection_type_cell treeview::cell:hover {
	background-color: var(--tab-hover);
}

tableview.selection_type_cell tableview::cell:selected,
treeview.selection_type_cell tableview::cell:selected {
	background-color: var(--primary);
}

table::cell,
tableview::cell,
treeview::cell {
	padding-left: 4dp;
	padding-right: 4dp;
	min-icon-size: 16dp 16dp;
}

treeview::cell::expander {
	min-size: 16dp 16dp;
}

TreeView,
TableView {
	background-color: var(--list-back);
}

TreeView > ScrollBar,
TableView > ScrollBar {
	background-color: var(--list-back);
}

tableview::header::column::arrow-up,
treeview::header::column::arrow-up,
listview::header::column::arrow-up {
	width: 16dp;
	height: 12dp;
	foreground-image: poly(line, var(--icon), "1dp 4dp, 5dp 7dp", 1dp), poly(line, var(--icon), "5dp 7dp, 9dp 4dp", 1dp);
}

tableview::header::column::arrow-down,
treeview::header::column::arrow-down,
listview::header::column::arrow-down {
	width: 16dp;
	height: 12dp;
	foreground-image: poly(line, var(--icon), "1dp 7dp, 5dp 4dp", 1dp), poly(line, var(--icon), "5dp 4dp, 9dp 7dp", 1dp);
}

ScrollBarMini {
	scrollbar-style: no-buttons;
	min-width: 4dp;
	min-height: 4dp;
}

ScrollBarMini::hback {
	min-height: 4dp;
	border-radius: 2dp;
	background-color: transparent;
}

ScrollBarMini::vback {
	min-width: 4dp;
	border-radius: 2dp;
	background-color: transparent;
}

ScrollBarMini::hslider,
ScrollBarMini::vslider {
	border-width: 1dp;
	border-color: var(--scrollbar-border);
	transition: all 0.15s;
}

ScrollBarMini::hbutton {
	min-width: 4dp;
	min-height: 4dp;
	background-color: var(--scrollbar-button);
	border-radius: 2dp;
	border-width: 0dp;
	transition: all 0.15s;
}

ScrollBarMini::vbutton {
	min-width: 4dp;
	min-height: 4dp;
	background-color: var(--scrollbar-button);
	border-radius: 2dp;
	border-width: 0dp;
	transition: all 0.15s;
}

ScrollBarMini::vslider:hover ScrollBar::vbutton,
ScrollBarMini::vbutton:hover,
ScrollBarMini::hslider:hover ScrollBar::hbutton,
ScrollBarMini::hbutton:hover {
	background-color: var(--primary);
}
tab::icon {
	tint: var(--icon);
}

tab:selected > tab::icon,
tab:not(:selected):hover > tab::icon {
	tint: var(--tab-font-active);
}

console {
	background-color: var(--term-back-color);
	color: var(--term-font-color);
	padding: 2dp;
	font-size: 11dp;
	border-bottom-color: var(--separator);
	border-bottom-width: var(--border-width);
}

ImageViewer > TextView {
	text-stroke-width: 1dp;
	text-stroke-color: var(--back);
}

/* Reserved classes used by themes */
.appbackground {
	background-color: var(--back);
}

TextInput.table_cell_edit {
	padding-top: 0!important;
	padding-bottom: 0!important;
}

DiffView > SelectButton {
	border-color: transparent;
	padding: 0dp 4dp 0dp 4dp;
	font-size: 10dp;
}

DiffView > SelectButton:hover,
DiffView > SelectButton:focus {
	border-color: var(--primary);
}

@media (prefers-color-scheme: light) {

:root {
	--primary: #3daee9;
	--back: #eff0f1;
	--font: #232627;
	--font-highlight: #3daee9;
	--font-hint: #232627;
	--font-selected-pressed: #eff0f1;
	--button-back: #fcfcfc;
	--button-border: #b3b4b5;
	--button-radius: 2dp;
	--base-horizontal-padding: 5dp;
	--base-vertical-padding: 5dp;
	--border-width: 1dp;
	--list-back: #ffffff;
	--separator: #cbcdcd;
	--item-hover: #93cee9;
	--slider-back: #e9e9e9;
	--slider-button: #cbcdcd;
	--slider-border: #e6e6e6;
	--scrollbar-border: #e6e6e6;
	--scrollbar-button: #cbcdcd;
	--scrollbar-hback-hover: #e9e9e9;
	--tab-back: #eff0f1;
	--tab-line: #e6e6e6;
	--tab-active: #fcfcfc;
	--tab-hover: #93cee9;
	--tab-close: #e6e6e6;
	--tab-close-hover: #e49aa2;
	--tab-font-active: white;
	--tab-font-inactive: #444;
	--icon: #232627;
	--icon-active: #3daee9;
	--icon-back-hover: #e6e6e6;
	--icon-line-hover: #232627;
	--icon-back-alert: #e49aa2;
	--menu-back: #eff0f1;
	--menu-font: #232627;
	--menu-border: #b3b4b5;
	--menu-font-active: #fcfcfc;
	--menu-font-disabled: #a8a9aa;
	--icon-line: #232627;
	--floating-icon: #666666;
	--term-back-color: #eff0f1;
	--term-font-color: #232627;
	--disabled-color: #727679;
	--disabled-border: #d3d4d5;
	--theme-error: #cc0000;
	--theme-warning: #cccc00;
	--theme-success: #00cc00;
	droppable-hovering-color: #00000020;
}

Tab:selected,
Tab:hover,
Tab:pressed {
	color: var(--font);
}

Tab:not(:selected):hover {
	color: var(--tab-font-active);
}

tab::icon,
tab:selected > tab::icon, {
	tint: var(--icon);
}

tab:not(:selected):hover > tab::icon {
	tint: var(--tab-font-active);
}

}

@media screen and (min-pixel-density: 1.1) and (max-pixel-density: 1.99) {

Menu::Separator {
	height: 3px;
	background-size: 100% 1px;
}

}