*, *::before, *::after {
	box-sizing: border-box;
}

html, textarea, select {
	font-family: "IBM Plex", "DejaVu Sans", "Helvetica", sans-serif;
}

.Form {
	display: block;
	width: 900px;
	margin: 0 auto;
}

nav.top-nav {
	margin-bottom: .5rem;
	border-bottom: 1px solid silver;
}

nav.top-nav, .content {
	margin: 0 auto;
	width: 900px;
}

a {
	color: gray;
	text-decoration: none;
}

a:hover {
	color: black;
	text-decoration: underline;
}

nav.top-nav a {
	display: inline-block;
	padding: .75rem;

	color: gray;
	text-decoration: none;
}

nav.top-nav a:hover {
	color: black;
	text-decoration: underline;
}

.Form .Row {
	display: flex;
	padding: .25rem;
}

.Form .Row.indented {
	padding-left: 10.25rem;
}

input[type="text"],
input[type="number"],
textarea,
.tag-input {
	border: 1px solid silver;
	padding: 0.5rem;
	border-radius: 5px;
	font-size: 1rem;
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
.tag-input.active {
	box-shadow: inset 0 0 0 1px #3c97ff;
	border-color: #3c97ff;
	outline: 0 none !important;
}

.Form label {
	flex-shrink: 0;
	width: 10rem;
	height: 2.1rem;
	line-height: 2.1rem;
	vertical-align: middle;
	text-align: right;
	display: inline-block;
	padding-right: .5rem;
	align-self: flex-start;
}

.Form input[type="text"],
.Form input[type="number"],
.Form select {
	height: 2.1rem;
	width: 15rem;
}

.Form textarea {
	flex-shrink: 1;
	width: 30rem;
	height: 6rem;
}

.Form label.checkbox-wrap {
	width: 15rem;
	padding-right: 1rem;
	text-align: left !important;
}

.tag-input {
	position: relative;
	width: 30rem;
	padding-bottom: 0rem !important;
}

.tag-input input,
.tag-input input:focus {
	border: 0 transparent;
	padding: 0;
	margin: 0;
	box-shadow: none;
	outline: 0 none !important;
}

/*

.cards-table {
	border-collapse: collapse;
	margin: 0 auto;
	margin-top: 1rem;
}

.cards-table .actions {
	font-size: 90%;
}

.cards-table td,
.cards-table th {
	padding: .5rem;
}

.cards-table thead th {
	border-bottom: 2px solid silver;
}

.cards-table tbody td {
	border-bottom: 1px solid silver;
}

.cards-table tbody tr:last-child td {
	border-bottom: 2px solid silver;
}

.cards-table td.tags {
	padding: .25rem;
}

.cards-table .tag {
	background: #E2E1DF;
	font-size: 90%;
	padding: 0.25rem .45rem;
	border-radius: 3px;
	display: inline-block;
}

.paginate {
	margin: 1rem auto;
	width: 300px;
	text-align: center;
	white-space: nowrap;
}

.paginate span,
.paginate a {
	padding: .5rem 1rem;
	border-radius: .5rem;
	border: 1px solid silver;
	text-decoration: none;
}

.paginate span.num {
	border: 1px solid #ccc;
	color: gray;
}

.paginate a {
	cursor: pointer;
	user-select: none;
}

.paginate a:hover {
	background: #ccc;
	text-decoration: none;
}

.paginate .disabled {
	opacity: .5;
	cursor: default;
}

.paginate .disabled:hover {
	color: gray;
	background: transparent;
}

*/

li {
	padding-bottom: .5rem;
}

.toast {
	border: 1px solid black;
	border-radius: 5px;
	padding: .5rem;
	margin: .5rem 0;
}

.toast.error {
	border-color: #dc143c;
}

.toast.success {
	border-color: #32cd32;
}