/*
Accent colors

green	#5ea93b"
	
*/

html
{
	padding: 0;
	margin: 0;
	-webkit-user-select: none;
}
body		
{
	font: 13px/18px Helvetica, sans-serif;
	margin: 0;
	padding: 12px 15px;
	color: black;
	background: transparent;	
}

button,
input[type="checkbox"],
input[type="radio"]
{
	-webkit-appearance: none;		
	font-family: sans-serif;
	font-size: 13px;
	line-height: 15px;
	-webkit-transition-duration: .2s;
	-webkit-transition-timing-function: ease;
	-webkit-transition-property: background-color, border-color;
	
/* 	Theme-specific properties */
	background: white;
	border: .5px solid transparent;
	border-radius: 4px;
	border-top-color:    rgba(0,0,0,.25);
	border-right-color:  rgba(0,0,0,.33);
	border-left-color:   rgba(0,0,0,.33);
	border-bottom-color: rgba(0,0,0,.4);
	box-shadow: 0px 1px 0px rgba(0,0,0,.05);

}
button:active, button.active,
input[type="checkbox"]:active, input[type="checkbox"].active,
input[type="radio"]:active, input[type="radio"].active,
.dark button:active, .dark button.active,
.dark input[type="checkbox"]:active, .dark input[type="checkbox"].active,
.dark input[type="radio"]:active, .dark input[type="radio"].active
{
	background-color: #4786ff; /* accent blue */
	background-image: -webkit-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,0));
	box-shadow: inset 0px 0px .5px rgba(0,0,0,.5);	
	color: white;
}
	/* 	accent purple */
	.purple button:active, .purple button.active,
	.purple input[type="checkbox"]:active, .purple input[type="checkbox"].active,
	.purple input[type="radio"]:active, .purple input[type="radio"].active
	{
		background: #ba5eb8;
	}
	/* 	accent pink */
	.pink button:active, .pink button.active,
	.pink input[type="checkbox"]:active, .pink input[type="checkbox"].active,
	.pink input[type="radio"]:active, .pink input[type="radio"].active
	{
		background: #e94dae;
	}
	/* 	accent red */
	.red button:active, .red button.active,
	.red input[type="checkbox"]:active, .red input[type="checkbox"].active,
	.red input[type="radio"]:active, .red input[type="radio"].active
	{
		background: #d04837;
	}
	/* 	accent orange */
	.orange button:active, .orange button.active,
	.orange input[type="checkbox"]:active, .orange input[type="checkbox"].active,
	.orange input[type="radio"]:active, .orange input[type="radio"].active
	{
		background: #f7951e;
	}
	/* 	accent yellow */
	.yellow button:active, .yellow button.active,
	.yellow input[type="checkbox"]:active, .yellow input[type="checkbox"].active,
	.yellow input[type="radio"]:active, .yellow input[type="radio"].active
	{
		background: #fbb235;
	}
	/* 	accent green */
	.green button:active, .green button.active,
	.green input[type="checkbox"]:active, .green input[type="checkbox"].active,
	.green input[type="radio"]:active, .green input[type="radio"].active
	{
		background: #7fb849;
	}
	/* 	accent graphite */
	.graphite button:active, .graphite button.active,
	.graphite input[type="checkbox"]:active, .graphite input[type="checkbox"].active,
	.graphite input[type="radio"]:active, .graphite input[type="radio"].active
	{
		background: #98989e;
	}


input[type="checkbox"]:checked,
input[type="radio"]:checked,
.dark input[type="checkbox"]:checked,
.dark input[type="radio"]:checked
{
	background: #4786ff; /* accent blue */
	border-width: 0px;
}	
	/* 	accent purple */
	.purple input[type="checkbox"]:checked,
	.purple input[type="radio"]:checked
	{
		background: #ba5eb8;
	}
	/* 	accent pink */
	.pink input[type="checkbox"]:checked,
	.pink input[type="radio"]:checked
	{
		background: #e94dae;
	}
	/* 	accent red */
	.red input[type="checkbox"]:checked,
	.red input[type="radio"]:checked
	{
		background: #d04837;
	}
	/* 	accent orange */
	.orange input[type="checkbox"]:checked,
	.orange input[type="radio"]:checked
	{
		background: #f7951e;
	}
	/* 	accent yellow */
	.yellow input[type="checkbox"]:checked,
	.yellow input[type="radio"]:checked
	{
		background: #fbb235;
	}
	/* 	accent green */
	.green input[type="checkbox"]:checked,
	.green input[type="radio"]:checked
	{
		background: #7fb849;
	}
	/* 	accent graphite */
	.graphite input[type="checkbox"]:checked,
	.graphite input[type="radio"]:checked
	{
		background: #98989e;
	}

input[type="checkbox"]
{
	width: 14px;
	height: 14px;
	border-radius: 3px;
}
input[type="checkbox"]:checked:after
{
	display: block;
	position: relative;
	top: 3px;
	left: 3px;
	content: '';
	width: 13px;
	height: 12px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAJCAYAAAD+WDajAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjMyMzJGNzhGMUNDMTFFOEExNzU5OTdENUJERjM4MjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjMyMzJGNzlGMUNDMTFFOEExNzU5OTdENUJERjM4MjMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCMzIzMkY3NkYxQ0MxMUU4QTE3NTk5N0Q1QkRGMzgyMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMzIzMkY3N0YxQ0MxMUU4QTE3NTk5N0Q1QkRGMzgyMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv5tGCAAAAC1SURBVHjaYvz//z8DFsAFxKYMIEksOBOIH2GTkAPiL4sXL14K4nAAMS+S5LqHDx++i4iIUAFx1gLxTqiEHxD/T0pKytq5cycDw5w5cyb8/fsXJDYViO8tW7ZsX3l5OSfYoW5ubtyTJ0+eApJ9+/btt+TkZNPXr1+DrWAGqvw9f/78cywsLBZz585dxs/Pv1RFRYXh6dOnDIwuLi4MjIyMDD9+/JAH0h+5uLg+/Pz5E+xZgAADAOThlMB5fCBXAAAAAElFTkSuQmCC) no-repeat;
}

input[type="radio"]
{
	width: 14px;
	height: 14px;
	border-radius: 14px;
}
input[type="radio"]:checked:after
{
	display: block;
	position: relative;
	width: 6px;
	height: 6px;
	top: 4px;
	left: 4px;
	border-radius: 6px;
	content: '';
	background: white;
	box-shadow: 0px 1px 1px rgba(0,0,0,.2);
}


button
{
	font-size: 13px;
	padding: 2px 20px 2px 20px;
}
button.smallWidth
{
	min-width: 50px;
}
button.midWidth
{
	min-width: 75px;
}
button.bigWidth
{
	min-width: 125px;
}

input[type="checkbox"],
input[type="radio"]
{
	box-shadow: inset 0px 1px 1px rgba(0,0,0,.15);
	border-top-color: rgba(0,0,0,.4);
}


label
{
	height: 15px;
	vertical-align: 6px;
}

/* Dark Theme */

.dark body, .dark body *,
body.dark, body.dark *
{
	/* debug */
/* 	background: #282829;  */
	color: white;
}

.dark button,
.dark input[type="checkbox"],
.dark input[type="radio"]
{
	background: rgba(255,255,255,.3);
/* 	border: 1px solid rgba(0,0,0,.4); */
	border: 0px;
	box-shadow: inset 0px 1px .5px rgba(255,255,255,.2);
	color: white;
/* 	box-shadow: 0px 1px 0px rgba(0,0,0,.3), inset 0px 1px 0px rgba(255,255,255,.3); */
}

/* Accents in Dark theme */

	.dark input[type="checkbox"],
	.dark input[type="radio"]
	{
		background-image: -webkit-linear-gradient(rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 100%);
	}

	/* 	accent purple */
	.dark.purple button:active, .dark.purple button.active,
	.dark.purple input[type="checkbox"]:active, .dark.purple input[type="checkbox"].active,
	.dark.purple input[type="radio"]:active, .dark.purple input[type="radio"].active
	{
		background: #9c3ca6;
	}
	/* 	accent purple */
	.dark.purple input[type="checkbox"]:checked,
	.dark.purple input[type="radio"]:checked
	{
		background: #9c3ca6;
	}
	
	
	
	/* 	accent red */
	.dark.red button:active, .dark.red button.active,
	.dark.red input[type="checkbox"]:active, .dark.red input[type="checkbox"].active,
	.dark.red input[type="radio"]:active, .dark.red input[type="radio"].active
	{
		background: #f43926;
	}
	/* 	accent red */
	.dark.red input[type="checkbox"]:checked,
	.dark.red input[type="radio"]:checked
	{
		background: #f43926;
	}
	/* 	accent graphite */
	.dark.graphite button:active, .dark.graphite button.active,
	.dark.graphite input[type="checkbox"]:active, .dark.graphite input[type="checkbox"].active,
	.dark.graphite input[type="radio"]:active, .dark.graphite input[type="radio"].active
	{
		background: #999999;
	}
	/* 	accent graphite */
	.dark.graphite input[type="checkbox"]:checked,
	.dark.graphite input[type="radio"]:checked
	{
		background: #999999;
	}