html {
	box-sizing: border-box;
	font-size: 16px;
}
*, *::before, *::after {
	box-sizing: inherit;
}
body {
	margin: 0 auto;
	display: flex;
	flex-flow: column;
	min-height: 100vh;
	padding: 10px;
	font-size: 1rem;
}
body > div {
	border: 1px solid #ddd;
	padding: 30px 15px 15px 15px;
	position: relative;
}
body > div + div {
	margin: 2.5em 0 0 0;
}
h1 {
	border-bottom: 1px solid #ddd;
	margin: 0.5em 0;
}
h2 {
	margin: 0;
	background-color: #fff;
	padding: 10px 15px;
	position: absolute;
	top: calc(-1 * (0.625em + 10px));
	left: 10px;
	border: inherit;
}
textarea {
	border: 1px solid #aaa;
	font-family: Inconsolata, Courier, monospace;
	font-size: 1.125rem;
	width: 100%;
	display: block;
}
#matchingPatterns textarea {
	min-height: 300px;
}
#exclusionPatterns textarea {
	min-height: 150px;
}
form {
	text-align: right;
	margin: 0 0 2.5em 0;
	display: flex;
	align-items: center;
	max-width: 640px;
}
form .buttons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1 1 0;
}
button {
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid #bbb;
	color: #fff;
	padding: 10px 16px;
	cursor: default;
	margin: 0 0 0 0.5em;
}
button.save-button {
	background-color: #16e;
	font-size: 1.5rem;
}
button.reset-button {
	background-color: #d3453d;
	font-size: 1rem;
}
button:active {
	transform: scale(0.95);
}
button:focus:active {
	outline: none;
}
button:disabled {
	background-color: #777;
	opacity: 0.3;
}
input#whitelist-mode {
	display: block;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid #000;
	font-size: 1rem;
	height: 2em;
	width: 4em;
	margin: 0 6px;
	background-color: #000;
	box-shadow: 
		-2em 0 0 1px #fff inset,
		0 0 0 3px #fff inset;
}
input#whitelist-mode:checked {
	border: 1px solid #fff;
	background-color: #fff;
	box-shadow: 
		2em 0 0 1px #000 inset,
		0 0 0 3px #000 inset;
}
input#whitelist-mode,
.mode-select-container span {
	cursor: pointer;
}
.mode-select-container {
	white-space: nowrap;
	display: flex;
	align-items: center;
	align-self: flex-start;
	border: 1px solid #ddd;
	padding: 8px 10px;
	cursor: default;
	background-color: #fff;
}
.mode-select-container.whitelist {
	background-color: #000;
	color: #fff;
}
.mode-select-container:not(.whitelist) .blacklist-mode-label,
.mode-select-container.whitelist .whitelist-mode-label {
	border-bottom: 1px dotted currentColor;
}
.mode-select-container span::selection {
	background-color: transparent;
}
.mode-select-container span.disabled {
	pointer-events: none;
}
.mode-select-container span:not(.disabled):hover {
	border-bottom: 1px solid currentColor;
}
form button:not(:disabled):hover {
	text-shadow:
		0 0 1px #fff,
		0 0 3px #fff,
		0 0 5px #fff;
	cursor: pointer;
}
#matchingPatterns.disabled h2 {
	color: rgba(0,0,0,0.15);
}
#matchingPatterns.disabled p {
	opacity: 0.2;
}
#matchingPatterns.disabled .textarea-container {
	position: relative;
}
#matchingPatterns.disabled .textarea-container::before {
	content: ".*";
	display: flex;
	position: absolute;
	background-color: rgba(232,232,232,0.9);
	width: 100%;
	height: 100%;
	z-index: 1;
	justify-content: center;
	align-items: center;
	font-family: Inconsolata, Courier, monospace;
	font-size: 4em;
}
body > p {
	padding: 0 15px;
}