button,
.button {
	background-color: #333;
	color: #bbb;
	text-align: center;
	padding: 2px 6px;
	border: 1px solid #444;
	border-radius: 3px;
	font-size: 1rem;
	min-width: 1rem;
	box-sizing: content-box;
	-webkit-user-select: none;
	user-select: none;
	display: inline-block;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

button.button--small,
.button.button--small {
	font-size: 0.9rem;
	padding: 1px 4px;
	margin: 2px;
}

button:hover,
.button:hover {
	background-color: #3c3c3c;
}

button:active,
.button:active {
	background-color: #282828;
}

button:focus,
.button:focus {
	border-color: #606060;
	outline: none;
}

input[type=text],
input[type=number] {
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: textfield;
	font-size: 1rem;
	border-radius: 3px;
	background-color: #101010;
	border: 1px solid #444;
	padding: 2px 4px;
}

input[type=text]:hover,
input[type=number]:hover {
	background-color: #070707;
}

input[type=text]:focus,
input[type=number]:focus {
	border-color: #606060;
	outline: none;
}

input[type=checkbox] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 2px solid #444;
	background-color: #101010;
	border-radius: 3px;
	width: 1.1rem;
	height: 1.1rem;
	vertical-align: middle;
	margin-top: -0.2rem;
}

input[type=checkbox]:checked {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0,5 4,9, 10,0' style='fill:none;stroke:rgb(150,150,150);stroke-width:2.5'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

input[type=radio] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 2px solid #444;
	background-color: #101010;
	border-radius: 50%;
	width: 1.1rem;
	height: 1.1rem;
	vertical-align: middle;
	margin-top: -0.2rem;
}

input[type=radio]:checked {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='100' width='100'><circle cx='50' cy='50' r='30' style='fill:rgb(150,150,150);'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

input[type=checkbox]:hover,
input[type=radio]:hover {
	background-color: #222;
}

input[type=checkbox]:focus,
input[type=radio]:focus {
	border: 2px solid #606060;
	outline: none;
}

input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 36px;
	background-color: transparent;
}

input[type=range]:focus {
	outline: none;
}

input[type=range]::-moz-range-track {
	width: 100%;
	height: 8px;
	border-radius: 4px;
	cursor: pointer;
	background: black;
	box-shadow: inset 0 0 0 2px #333;
}

input[type=range]:focus::-moz-range-track {
	box-shadow: inset 0 0 0 2px #3c3c3c;
}

input[type=range]::-moz-range-thumb {
	border-left: 8px solid #444;
	border-right: 8px solid #444;
	border-top: none;
	border-bottom: none;
	box-shadow: 0 0 0 1px #555;
	height: 24px;
	width: 2px;
	border-radius: 0;
	background: #ffffff;
	cursor: pointer;
}

input[type=range]::-moz-range-thumb:hover {
	box-shadow: 0 0 0 1px #646464;
	border-color: #555;
}

input[type=range]::-moz-range-thumb:active {
	border-color: #333;
}

input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 8px;
	border-radius: 4px;
	cursor: pointer;
	background: black;
	box-sizing: content-box;
	box-shadow: inset 0 0 0 2px #333;
}

input[type=range]:focus::-webkit-slider-runnable-track {
	box-shadow: inset 0 0 0 2px #3c3c3c;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border-left: 8px solid #444;
	border-right: 8px solid #444;
	border-top: none;
	border-bottom: none;
	box-shadow: 0 0 0 1px #555;
	height: 24px;
	width: 2px;
	border-radius: 0;
	box-sizing: content-box;
	background: #ffffff;
	cursor: pointer;
	margin-top: -8px;
}

input[type=range]::-webkit-slider-thumb:hover {
	box-shadow: 0 0 0 1px #646464;
	border-color: #555;
}

input[type=range]::-webkit-slider-thumb:active {
	border-color: #333;
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #333;
	color: #bbb;
	padding: 2px 1.1rem 2px 6px;
	border: 1px solid #444;
	border-radius: 3px;
	font-size: 1rem;
	min-width: 1rem;
	box-sizing: content-box;
	box-shadow: none;
	position: relative;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='70' width='120'><path d='M 10,10 60,60 110,10' style='fill:none;stroke:rgb(150,150,150);stroke-width:20;stroke-linecap:round; stroke-linejoin:round'/></svg>");
	background-position: center right 0.5em;
	background-repeat: no-repeat;
	background-size: auto 25%;
}

select:hover {
	background-color: #3c3c3c;
}

select:active {
	background-color: #282828;
}

select:focus {
	border-color: #606060;
	outline: none;
}

option {
	background-color: #333;
	color: #bbb;
}

button:disabled,
select:disabled,
input:disabled,
label.disabled {
	opacity: 0.4;
	pointer-events: none;
}

@media (hover: hover) {
	::-webkit-scrollbar {
		width: 12px;
		height: 12px;
	}

	::-webkit-scrollbar-track {
		background: #111;
	}

	::-webkit-scrollbar-thumb {
		background: #444;
	}

	::-webkit-scrollbar-thumb:hover {
		background: #555;
	}

	::-webkit-scrollbar-corner {
		background: #111;
	}
}

@-moz-document url-prefix() {
	body {
		scrollbar-color: #444 #111;
		scrollbar-width: auto;
	}
}