:root {
	--main-bg-color: #ffffff;
	--p1: #ffffff;
	--p2: #bababa;
	--p3: #939393;
	--p4: #0000ff;
	--widget-outline: 1px solid rgba(0, 0, 0, 0.1);
}

[data-togglebody="hide-right-panel"] {
	display: none;
}

.clickable:hover {
	opacity: 0.9;
}

.clickable:active {
	opacity: 0.8;
}

body {
	background: var(--main-bg-color);
	color: #747474;
	margin: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	background: #000;
	outline: none;
	color: none;
	border: 0;
}

input[type="range"] {
	-webkit-appearance: none;
	background-color: none;
	/* outline: 1px solid rgba(0, 0, 0, 0.1); */
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background-color: #aaa;
	opacity: 0.9;
}

.tool-area {
	display: inline-block;
	margin: 0;
	padding: 0;
}

.tool-area,
.leftsidepanel,
.alignment,
.layers,
.right-panel-wrap {
	border: var(--widget-outline);
}

.right-panel-wrap {
	border-width: 0;
	border-left-width: 1px;
}

#shape_cats > div,
#shape_buttons > div,
.layers,
.alignment,
.file {
	z-index: 1400;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background: #fff;
}

.menu,
.tools,
.top-panel,
.right-panel-wrap,
.tool-area {
	background: hsla(55, 9%, 98%, 0.92);
	/* background: url(../images/background.png); */
	box-shadow: inset 0 0 4px rgba(255, 255, 255, 1);
}

#shape_cats div:hover {
	background: #ccc;
}

#layerlist td.layername {
	cursor: pointer;
}

[id^="pathpoint"]:hover {
	stroke: #aaf;
	stroke-width: 5;
	opacity: 1;
}

[id^="ctrlpoint"]:hover {
	stroke-width: 5;
	opacity: 1;
}

[id^="segline"] {
	stroke: #5200ff;
	stroke-dasharray: "2,2";
}

[id^="pathpoint"] {
	opacity: 0.9;
	stroke-width: 3;
}

[id^="ctrlpoint"] {
	opacity: 0.5;
	stroke-width: 1;
}

#layerlist tr.layersel td.layername {
	text-decoration: underline;
	background: #fff;
}

.layername[contenteditable] {
	outline: 1px solid #aaa;
}

#svg_editor [contenteditable],
#svg_editor #layerlist [contenteditable] {
	cursor: text;
}

div.palette_item:hover {
	-webkit-transform: scale(1.25);
}

div.palette_item:active {
	-webkit-transform: scale(1.3);
}

.collapsable {
	cursor: pointer;
}

.bodyColor,
.dropdown li {
	color: #747474;
}

body {
}

a:hover {
	color: #003bd5;
}

::-webkit-scrollbar-track {
	border-color: rgba(0, 0, 0, 0.03);
	background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-track:hover {
	border-width: 1px;
	border-radius: 1px;
	border-style: solid;
}

::-webkit-scrollbar-thumb {
	border-color: hsl(0, 0%, 79%);
	background-color: hsl(0, 0%, 94%);
	border-radius: 1px;
	border-width: 1px;
	border-style: solid;
}

::-webkit-scrollbar-thumb:hover {
	border-color: hsl(0, 0%, 80%);
	background-color: hsl(0, 0%, 93%);
}

/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:end:decrement {
	display: none;
}

::-webkit-scrollbar {
	width: 13px;
	height: 13px;
}

.widget input[type="checkbox"] {
	border: 1px solid #a0a0a0;
	margin-bottom: 0;
	margin-top: 0;
}

.view {
	background-color: hsl(0, 0%, 90%);
}

button,
div[type="button"],
.palette_item,
.layer_button,
.button {
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	color: inherit;
	font-weight: normal;
}

/*[data-tool="select"] .selectedElement{
    outline: 0px dotted #0000FF;
}
*/
button {
	background-color: #333;
}

a:active {
	-webkit-transform: scale(1.08);
}

[data-tool="picker"] .currentLayer > * {
	outline: 3px solid rgba(0, 0, 0, 0.5);
	background: rgba(0, 0, 0, 0.2);
}

[data-tool="picker"] .currentLayer > *:hover {
	outline: 4px solid rgba(0, 0, 255, 0.8);
	background: rgba(0, 0, 255, 0.4);
}

[data-tool="picker"] #svgcanvas .selected {
	pointer-events: none;
	opacity: 0.1;
}

[data-tool="picker"] #selectorParentGroup {
	display: none;
}

[data-tool="select"] .currentLayer > *:active {
	outline: 3px dotted rgba(0, 0, 255, 0.5);
	background: rgba(0, 0, 255, 0.2);
}

[data-tool="select"] .currentLayer > *:hover {
	outline: 2px dotted rgba(0, 0, 255, 0.2);
	background: rgba(0, 0, 255, 0.05);
}

[data-tool="select"] .currentLayer > * {
	cursor: move;
}

[data-tool="select"] .currentLayer > g:hover > * {
	background: rgba(0, 0, 255, 0.03);
	outline: 1px dotted rgba(0, 0, 155, 0.1);
}

[title="#ffffff"] {
	background-color: #f7f5f5;
}

#tools_top:hover {
	transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	opacity: 0.95;
}

#tools_top {
}

#propertiesLable {
	color: #797979;
}

input[disabled],
select[disabled] {
	background: hsla(0, 100%, 100%, 0);
	opacity: 0.35;
}

input,
select {
	background: none;
	color: inherit;
	font-size: 1rem;
	outline: none;
}

input:focus,
input:hover,
select:hover,
select:focus {
	color: #000;
}

.canvasColor {
	background-color: hsl(31, 15%, 95%);
	border-color: rgba(0, 0, 0, 0.1);
}

.updating_widgets .widget {
	background-color: #000;
}

#ruler_x {
}

#ruler_y {
	border-top: none;
}

#layerlist {
	border-color: transparent;
}

button,
.button {
	background-color: rgba(51, 51, 51, 0);
	border: none;
	padding: 0 1rem;
}

.model-overlay button,
.model-overlay .button {
	border: 1px solid #eee;
}

.measure_line,
.x1_line,
.y1_line,
.x2_line,
.y2_line {
	pointer-events: none;
}

.measure_length {
	color: #000;
	font-size: var(--font-md);
}

[data-tool="ext-measure-tool"] #svgcanvas,
[data-tool="ext-measure-tool"] #svgcanvas > g * {
	cursor: crosshair;
}

button {
	text-align: center;
}

button:hover,
.button:hover {
	background-color: rgba(0, 0, 0, 0.03);
	color: #000;
	outline: 1px outset rgba(0, 0, 0, 0.13);
}

.tools_flyout .tool_button {
	background-color: var(--main-bg-color);
	/* outline: 1px solid #e7e7e7; */
	border: none;
	padding: 0.5rem;
}

[disabled],
[disabled]:hover,
[disabled]:active,
[disabled]:focus {
	-webkit-transform: initial;
	opacity: 0.3;
	border-color: transparent;
	outline-color: transparent;
	cursor: default;
	box-shadow: none;
	background-color: transparent;
	color: #666;
}

.space {
	height: 20px;
}

.newLayer {
	cursor: pointer;
}

.hotkey {
	color: black;
	font-weight: bold;
	font-size: var(--font-2xs);
	visibility: hidden;
	position: absolute;
	width: 100%;
	text-align: center;
	left: 0;
	bottom: 0;
	height: var(--font-2xs);
	line-height: var(--font-2xs);
}

.showHotkey .hotkey {
	visibility: visible;
}

.wireframe #svgcontent text {
	fill: #000;
	stroke: none;
}

.wireframe #backgroundrect {
	fill: #fff;
}

[data-hotkey] {
	position: relative;
}

.showHotkey [data-hotkey] {
	background-size: auto 72%;
	background-position: center top;
}

.manageObjects {
	display: inline-block;

	margin: 0 1.5rem;
}

.layerSelected .manageObjects,
.nodeSelected .manageObjects {
	outline: 2px solid #000;
	background: #fff;
}

li {
	list-style: disc;
}

.packaged-app .help {
	display: none;
}

.plugins,
.help-popup {
	position: relative;
	width: 60rem;
	max-width: 80vw;
	max-height: 80vh;
	padding: 1.5rem;
	margin-top: 3rem;
	display: none;
	border: 1px solid #89898a;
	margin-left: 1vw;
	text-align: center;
	border-radius: 3px;
}

.pluginslist button,
.pluginslist .button {
	position: absolute;
	right: 1.5rem;
	bottom: 0;
}

.pluginslist button,
.pluginslist .button,
#popup_ok {
	border: none;
	background: linear-gradient(#3970fc, rgba(0, 81, 253, 0.94));
	border-radius: 2px;
	font-size: var(--font-md);
	padding: 0 3rem;
	box-sizing: content-box;
	color: #fff;
	text-align: center;
	line-height: var(--btn-h);
}

.pluginslist > li {
	position: relative;
	padding-right: 15rem;
	list-style: none;
}

[data-togglebody="hide-right-panel"] {
	/* background: linear-gradient(#F8F8F8, #F3F3F3); */
	outline: 1px solid #fafafa;
}

[data-togglebody="hide-right-panel"]:hover {
	background: linear-gradient(#eee, #fff);
}

.file,
#shape_cats,
.model-overlay,
.advancedZoom,
.widget:hover,
.topbar:hover,
.right-panel-wrap:hover {
	color: #000;
}

.pluginslist {
	list-style: none;
	padding-right: 0;
	max-height: 45vh;
	overflow: auto;
	margin-bottom: 1.5rem;
	text-align: left;
	background: linear-gradient(#fafafa, var(--main-bg-color));
	color: #333;
}

[data-selected-shapes="1"] #align_relative_to {
	opacity: 0.5;
}

.tool_button_current:not([disabled]),
.push_button_pressed:not([disabled]),
button:not([disabled]):active,
.button:not([disabled]):active,
.color_tool > *:active,
body.wireframe #tool_wireframe_check,
body.ruler #show_rulers {
	background-color: #eee;
}