button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--theme-color-content-bg);
	border: 1px solid var(--theme-color-content-border);
	min-width: 40px;
	height: 40px;
	border-radius: 5px;
	padding: 8px;
	font-weight: var(--theme-button-font-weight);
	color: var(--theme-color-content-text);
}

button > .iconify {
	width: 1.5em;
	height: 1.5em;
}

button[disabled] {
	color: var(--theme-color-content-text-secondary);
	opacity: 0.5;
}

button:hover {
	background-color: var(--theme-color-content-hover-bg);
	cursor: pointer;
}

button[disabled]:hover {
	background-color: var(--theme-color-content-bg);
	cursor: default;
}

button:focus {
	outline: 0;
}

input {
	position: relative;
	background-color: var(--theme-color-content-bg);
	border: 1px solid var(--theme-color-content-border);
	box-sizing: border-box;
	color: var(--theme-color-content-text);
}

input:focus {
	outline: 0;
}

input[type="text"], input[type="password"], input[type="number"] {
	height: 40px;
	font-family: 'Open Sans', sans-serif;
	border-width: 1px 1px 1px 1px;
	border-color: var(--theme-color-content-border);
	padding: 8px;
	border-radius: 5px;
}

input[type="number"] {
	appearance: textfield; /* Hide increase/decrease buttons */
}

input[type="checkbox"] {
	width: 16px;
	height: 16px;
}

input[type="file"] {
	height: 40px;
	font-family: 'Open Sans', sans-serif;
	border-width: 1px 1px 1px 1px;
	border-color: var(--theme-color-content-border);
	padding: 8px;
	border-radius: 5px;
	width: 100%;
}

input[disabled] {
	color: var(--theme-color-content-text-secondary);
	opacity: 0.75;
	cursor: default;
}

select {
	position: relative;
	background-color: var(--theme-color-content-bg);
	border: 1px solid var(--theme-color-content-border);
	box-sizing: border-box;
	outline: 0;
	height: 40px;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	border-radius: 5px;
	padding: 8px;
	padding-left: 4px;
	color: var(--theme-color-content-text)
}

select[disabled] {
	color: var(--theme-color-content-text-secondary);
	opacity: 0.75;
	cursor: default;
}

select > option {
	outline: 0;
	font-family: 'Open Sans', sans-serif;
}

/* Checkboxes */

.checkbox-container, .checkbox-container.element {
	display: flex;
	position: relative;
	cursor: pointer;
	font-size: 22px;
	width: 27px;
	height: 27px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkbox-checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: transparent;
	border-radius: 3px;
	border: var(--theme-checkbox-border-width) solid gray;
}

.checkbox-container input[disabled] ~ .checkbox-checkmark {
	color: var(--theme-color-content-text-secondary);
	opacity: 0.5;
	cursor: default;
}

.checkbox-container:hover input ~ .checkbox-checkmark {
	background-color: var(--theme-checkbox-hover-background);
}

.checkbox-container input:checked ~ .checkbox-checkmark {
	background-color: var(--theme-color-accent);
	border: var(--theme-checkbox-border-width) solid var(--theme-color-accent);
}

.checkbox-checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.checkbox-container input:checked ~ .checkbox-checkmark:after {
	display: block;
}

.checkbox-container .checkbox-checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');