:root {
--BackgroundColor: #fff;
--TextColor: #000;
--HighlightedBackgroundColor: #e0e0e0;
--HighlightedTextColor: #000;
--SelectedBackgroundColor: #e0e0e0;
--SelectedTextColor: #000;
--DisabledTextColor: #808080;
--BorderColor: #bbb;
--DisabledBorderColor: #404040;
--ActiveBorderColor: #0078D7;
--NormalBackgroundColor: #fff;
--NormalTextColor: #000;
--NormalDisabledTextColor: #808080;
--NormalHighlightedTextColor: #000;
--NormalHighlightedBackgroundColor: #ccc;
--NormalSelectedTextColor: #000;
--NormalSelectedBackgroundColor: #ccc;
--HeaderBackgroundColor: #4d92a8;
--HeaderTextColor: #fff;
--HeaderDisabledTextColor: #404040;
--HeaderHighlightedTextColor: #fff;
--HeaderHighlightedBackgroundColor: #00576f;
--HeaderSelectedTextColor: #fff;
--HeaderSelectedBackgroundColor: #00576f;
--ToolBackgroundColor: #e8e8e8;
--ToolTextColor: #000;
--ToolDisabledTextColor: #808080;
--ToolHighlightedTextColor: #000;
--ToolHighlightedBackgroundColor: #ccc;
--ToolSelectedTextColor: #000;
--ToolSelectedBackgroundColor: #ccc;
--InputBackgroundColor: #fff;
--InputTextColor: #000;
--InputDisabledTextColor: #808080;
--InputHighlightedTextColor: #000;
--InputHighlightedBackgroundColor: #ccc;
--InputSelectedTextColor: #000;
--InputSelectedBackgroundColor: #ccc;
--ListBackgroundColor: #e8e8e8;
--ListTextColor: #000;
--ListDisabledTextColor: #808080;
--ListHighlightedTextColor: #000;
--ListHighlightedBackgroundColor: #ccc;
--ListSelectedTextColor: #000;
--ListSelectedBackgroundColor: #ccc;
--ButtonBackgroundColor: #d0d0d0;
--ButtonTextColor: #000;
--ButtonDisabledTextColor: #808080;
--ButtonHighlightedTextColor: #000;
--ButtonHighlightedBackgroundColor: #b0b0b0;
--ButtonSelectedTextColor: #000;
--ButtonSelectedBackgroundColor: #b0b0b0;
--MenubarBackgroundColor: #308090;
--MenubarTextColor: #fff;
--MenubarDisabledTextColor: #888;
--MenubarHighlightedTextColor: #fff;
--MenubarHighlightedBackgroundColor: #207080;
--MenubarSelectedTextColor: #fff;
--MenubarSelectedBackgroundColor: #106070;
--CheckBackgroundColor: #2196F3;
--CheckTextColor: #ffffff;
--PanelBackgroundColor: #f8f8f8;
--PanelTextColor: #000;
--ProgressBackgroundColor: #ffffff;
--ProgressTextColor: #00ff00;
--ErrorBackgroundColor: #f44336;
--ErrorTextColor: #fff;
--InfoBackgroundColor: #2196d3;
--InfoTextColor: #fff;
--WarningBackgroundColor: #ff9800;
--WarningTextColor: #fff;
--SuccessBackgroundColor: #04AA6D;
--SuccessTextColor: #fff;
--FontFamily: 'Verdana', sans-serif;
--FontSize: medium;
--FontSizeMobile: large;
--FontSizeSmall: small;
--FontSizeLarge: 1.2em;
--Padding: 0.5em;
--Spacing: 0.25em;
}
:root {
	--ThmBorderColor: var(--BorderColor);
	--ThmDisabledBorderColor: var(--DisabledBorderColor);
	--ThmActiveBorderColor: var(--ActiveBorderColor);
	--ThmBkColor: var(--BackgroundColor);
	--ThmColor: var(--TextColor);
	--ThmDisabledColor: var(--DisabledTextColor);
	--ThmHlBkColor: var(--HighlightedBackgroundColor);
	--ThmHlColor: var(--HighlightedTextColor);
	--ThmSelBkColor: var(--SelectedBackgroundColor);
	--ThmSelColor: var(--SelectedTextColor);
}

.thm-normal {
	--ThmBkColor: var(--NormalBackgroundColor);
	--ThmColor: var(--NormalTextColor);
	--ThmDisabledColor: var(--NormalDisabledTextColor);
	--ThmHlBkColor: var(--NormalHighlightedBackgroundColor);
	--ThmHlColor: var(--NormalHighlightedTextColor);
	--ThmSelBkColor: var(--NormalSelectedBackgroundColor);
	--ThmSelColor: var(--NormalSelectedTextColor);
}

.thm-input {
	--ThmBkColor: var(--InputBackgroundColor);
	--ThmColor: var(--InputTextColor);
	--ThmDisabledColor: var(--InputDisabledTextColor);
	--ThmHlBkColor: var(--InputHighlightedBackgroundColor);
	--ThmHlColor: var(--InputHighlightedTextColor);
	--ThmSelBkColor: var(--InputSelectedBackgroundColor);
	--ThmSelColor: var(--InputSelectedTextColor);
}

.thm-header {
	--ThmBkColor: var(--HeaderBackgroundColor);
	--ThmColor: var(--HeaderTextColor);
	--ThmDisabledColor: var(--HeaderDisabledTextColor);
	--ThmHlBkColor: var(--HeaderHighlightedBackgroundColor);
	--ThmHlColor: var(--HeaderHighlightedTextColor);
	--ThmSelBkColor: var(--HeaderSelectedBackgroundColor);
	--ThmSelColor: var(--HeaderSelectedTextColor);
}

.thm-tool {
	--ThmBkColor: var(--ToolBackgroundColor);
	--ThmColor: var(--ToolTextColor);
	--ThmDisabledColor: var(--ToolDisabledTextColor);
	--ThmHlBkColor: var(--ToolHighlightedBackgroundColor);
	--ThmHlColor: var(--ToolHighlightedTextColor);
	--ThmSelBkColor: var(--ToolSelectedBackgroundColor);
	--ThmSelColor: var(--ToolSelectedTextColor);
}

.thm-list {
	--ThmBkColor: var(--ListBackgroundColor);
	--ThmColor: var(--ListTextColor);
	--ThmDisabledColor: var(--ListDisabledTextColor);
	--ThmHlBkColor: var(--ListHighlightedBackgroundColor);
	--ThmHlColor: var(--ListHighlightedTextColor);
	--ThmSelBkColor: var(--ListSelectedBackgroundColor);
	--ThmSelColor: var(--ListSelectedTextColor);
}

.thm-button {
	--ThmBkColor: var(--ButtonBackgroundColor);
	--ThmColor: var(--ButtonTextColor);
	--ThmDisabledColor: var(--ButtonDisabledTextColor);
	--ThmHlBkColor: var(--ButtonHighlightedBackgroundColor);
	--ThmHlColor: var(--ButtonHighlightedTextColor);
	--ThmSelBkColor: var(--ButtonSelectedBackgroundColor);
	--ThmSelColor: var(--ButtonSelectedTextColor);
}

.thm-menubar {
	--ThmBkColor: var(--MenubarBackgroundColor);
	--ThmColor: var(--MenubarTextColor);
	--ThmDisabledColor: var(--MenubarDisabledTextColor);
	--ThmHlBkColor: var(--MenubarHighlightedBackgroundColor);
	--ThmHlColor: var(--MenubarHighlightedTextColor);
	--ThmSelBkColor: var(--MenubarSelectedBackgroundColor);
	--ThmSelColor: var(--MenubarSelectedTextColor);
}

.thm-check {
	--ThmBkColor: var(--CheckBackgroundColor);
	--ThmColor: var(--CheckTextColor);
}

.thm-panel {
	--ThmBkColor: var(--PanelBackgroundColor);
	--ThmColor: var(--PanelTextColor);
}

.thm-progress {
	--ThmBkColor: var(--ProgressBackgroundColor);
	--ThmColor: var(--ProgressTextColor);
}

.thm-info {
	--ThmBkColor: var(--InfoBackgroundColor);
	--ThmColor: var(--InfoTextColor);
}

.thm-error {
	--ThmBkColor: var(--ErrorBackgroundColor);
	--ThmColor: var(--ErrorTextColor);
}

.thm-warning {
	--ThmBkColor: var(--WarningBackgroundColor);
	--ThmColor: var(--WarningTextColor);
}

.thm-success {
	--ThmBkColor: var(--SuccessBackgroundColor);
	--ThmColor: var(--SuccessTextColor);
}

.state-info {
	background-color: var(--InfoBackgroundColor);
	color: var(--InfoTextColor);
}

.state-warning {
	background-color: var(--WarningBackgroundColor);
	color: var(--WarningTextColor);
}

.state-error {
	background-color: var(--ErrorBackgroundColor);
	color: var(--ErrorTextColor);
}

.state-success {
	background-color: var(--SuccessBackgroundColor);
	color: var(--SuccessTextColor);
}


.theme {
background-color: var(--ThmBkColor);
color: var(--ThmColor);
}

.theme.disabled {
color: var(--ThmDisabledColor);
}

.theme .icon::before, .theme .icon::after, .theme.icon::before, .theme.icon::after {
background-color: var(--ThmColor);
}

.theme.disabled .icon::before, .theme.disabled .icon::after, .theme.disabled.icon::before, .theme.disabled.icon::after {
background-color: var(--ThmDisabledColor)!important;
}

.theme.disabled input {
color: var(--ThmDisabledColor);
}

[x-highlight].active:not(.disabled), [x-highlight].popup-open {
--ThmBkColor: var(--ThmSelBkColor);
--ThmColor: var(--ThmSelColor);
}

@media (max-width: 575px) {
:root {
--FontSize: var(--FontSizeMobile);
}
}

*[x-can-hover = true] [x-highlight]:active:not(.disabled) {
--ThmBkColor: var(--ThmSelBkColor);
--ThmColor: var(--ThmSelColor);
}

*[x-can-hover = true] [x-highlight]:hover:not(.disabled):not(.popup-open):not(.active) {
--ThmBkColor: var(--ThmHlBkColor);
--ThmColor: var(--ThmHlColor);
}

@media only screen and (max-width: 350px) {
:root {
--FontSize: var(--FontSizeSmall);
}
}