::selection {
	color: var(--element-select-color);
	border-radius: 4px;
	background: var(--element-select-background);
	cursor: text;
}

::-moz-selection {
	color: var(--element-select-color);
	border-radius: 4px;
	background: var(--element-select-background);
	cursor: text;
}

::-webkit-scrollbar {
	width: 16px;
	border: 0px solid transparent;
	background: var(--scrollbar-default-background);
}

::-webkit-scrollbar-thumb {
	width: 16px;
	border: 0px solid transparent;
	border-radius: 2px;
	background: var(--scrollbar-default-color);
}



* {
	scrollbar-color: var(--scrollbar-default-color) var(--scrollbar-default-background);
	scrollbar-width: auto;
}

a {
	padding: 0px 2px;
	color: var(--link-default-color);
	border: 1px solid transparent;
	border-bottom: 1px solid var(--link-default-color);
	border-radius: 2px;
	background: var(--link-default-background);
	box-sizing: border-box;
	text-decoration: none;
	transition: 200ms all ease-out;
	vertical-align: middle;
	outline: none;
	cursor: pointer;
}

a[disabled],
a[disabled]:hover {
	color: var(--element-disable-color);
	border: 1px solid transparent;
	border-bottom: 1px solid var(--element-disable-color);
	background: var(--element-disable-background);
	pointer-events: none;
	user-select: none;
	cursor: not-allowed;
}

a:focus,
a:hover {
	color: var(--link-focus-color);
	border: 1px solid var(--link-focus-color);
	background: var(--link-focus-background);
	outline: none;
}



button {
	display: inline-block;
	min-width: 32px;
	margin: 0px;
	padding: 0px;
	line-height: 32px;
	height: 32px;
	color: var(--element-default-color);
	font-family: 'museo';
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	background: var(--element-default-background);
	border: 1px solid transparent;
	border-radius: 4px;
	box-sizing: border-box;
	transition: 200ms all ease-out;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	vertical-align: middle;
	outline: none;
	cursor: pointer;
}

button.active {
	color: var(--element-active-color);
}

button:before {
	display: inline;
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-family: 'icon';
	font-size: 24px;
	font-weight: 400;
	text-align: center;
	vertical-align: top;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

button[disabled],
button[disabled]:hover {
	color: var(--element-disable-color);
	border: 1px solid transparent;
	background: var(--element-disable-background);
	cursor: not-allowed;
}

button:focus,
button:hover {
	color: var(--element-focus-color);
	border: 1px solid var(--element-focus-color);
	background: var(--element-focus-background);
	outline: none;
}

button::-moz-focus-inner {
	border: 0px solid transparent;
}



input[type="radio"] {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin: 0px;
	padding: 0px;
	line-height: 32px;
	font-size: 24px;
	color: var(--element-default-color);
	background: var(--element-default-background);
	border: 1px solid transparent;
	border-radius: 4px;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	transition: 200ms all ease-out;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	outline: none;
	cursor: pointer;
}

input[type="radio"]:before {
	display: inline-block;
	width: 100%;
	height: 32px;
	margin: 0px;
	padding: 0px;
	content: '\e5cc';
	font-family: 'icon';
	font-weight: 400;
	text-align: center;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

input[type="radio"].active {
	color: var(--element-active-color);
}

input[type="radio"][disabled],
input[type="radio"][disabled]:hover {
	color: var(--element-default-color);
	background: var(--element-default-background);
	cursor: default;
}

input[type="radio"]:focus,
input[type="radio"]:hover {
	color: var(--element-focus-color);
	border: 1px solid var(--element-focus-color);
	background: var(--element-focus-background);
	outline: none;
}

input[type="radio"]:checked {
	color: var(--element-active-color);
}



input[type="text"] {
	display: inline-block;
	height: 32px;
	margin: 0px;
	padding: 0px;
	line-height: 32px;
	color: var(--layout-default-color);
	font-family: 'vera-mono';
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	background: var(--element-default-background);
	border: 1px solid transparent;
	border-radius: 4px;
	vertical-align: middle;
	transition: 200ms all ease-out;
	box-sizing: border-box;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	outline: none;
	cursor: text;
}

input[type="text"].active {
	color: var(--element-active-color);
}

input[type="text"][data-map].invalid,
input[type="text"][data-map].invalid:focus,
input[type="text"][data-map].invalid:hover,
input[type="text"][pattern].invalid,
input[type="text"][pattern].invalid:focus,
input[type="text"][pattern].invalid:hover {
	color: var(--element-invalid-color);
	border: 1px solid var(--element-invalid-color);
	background: var(--element-invalid-background);
}

input[type="text"][disabled],
input[type="text"][disabled]:hover {
	color: var(--layout-default-color);
	border: 1px solid transparent;
	background: var(--element-disable-background);
	cursor: not-allowed;
}

input[type="text"]:focus,
input[type="text"]:hover {
	color: var(--element-focus-color);
	border: 1px solid var(--element-focus-color);
	background: var(--element-focus-background);
	outline: none;
}

input[type="text"]::selection {
	color: var(--element-select-color);
	background: var(--element-select-background);
	cursor: text;
}



textarea {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	min-height: 32px;
	line-height: 32px;
	color: var(--layout-default-color);
	font-family: 'vera-mono';
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	background: var(--layout-default-background);
	border: 1px solid transparent;
	border-radius: 4px;
	box-sizing: border-box;
	transition: 200ms all ease-out;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	outline: none;
	cursor: text;
}

textarea.active {
	color: var(--element-active-color);
}

textarea[data-map].invalid,
textarea[data-map].invalid:focus,
textarea[data-map].invalid:hover,
textarea[pattern].invalid,
textarea[pattern].invalid:focus,
textarea[pattern].invalid:hover {
	color: var(--element-invalid-color);
	border: 1px solid var(--element-invalid-color);
	background: var(--element-invalid-background);
}

textarea[disabled],
textarea[disabled]:hover {
	color: var(--layout-default-color);
	border: 1px solid transparent;
	background: var(--element-disable-background);
	cursor: not-allowed;
}

textarea:focus,
textarea:hover {
	color: var(--element-focus-color);
	border: 1px solid var(--element-focus-color);
	background: var(--element-focus-background);
	outline: none;
}

textarea::selection {
	color: var(--element-select-color);
	background: var(--element-select-background);
	cursor: text;
}