label {
	margin-bottom: 1rem;
	display: block;
	line-height: 1.5rem;
}
input:not([type="checkbox"]), select {
	display: block;
	width: 100%;
	border: none;
	margin-top: .3rem;
	padding: .5rem;
}
select {
	height: 2.6rem;
	padding: 0rem 0.5rem;
}
.buttonrow .button,
.buttonrow input[type="button"],
.buttonrow input[type="submit"],
.buttonrow button {
	margin-top: 0;
}
.buttonrow {
	display: flex;
	margin-top: 1rem;
}
.buttonrow > * {
	width: 100%;
	margin: 0 .4rem;
	line-height: 2rem;
}
.buttonrow > *:first-child{
	margin-left:0;
}
.buttonrow > *:last-child{
	margin-right:0;
}
.buttonrow a,
label a {
	padding: .5rem;
	text-align: center;
}
a {
	color: var(--fg);
}
a:hover {
	background: rgba(255,255,255,.2);
	color: var(--fg);
}
input[type="checkbox"] {
	margin-right: .5rem;
}
input:focus,
select:focus {
	border-bottom: 2px solid var(--accent);
	padding-bottom: calc(.5rem - 2px);
}
input[type="checkbox"]:focus {
	outline: 2px solid var(--accent) !important;
	outline-offset: -2px;
}
.notification {
	display: block;
	padding: .5rem;
	margin: .5rem 0;
}
.notification:empty {
	display: none;
}
.notification.error {
	border: 1px solid rgb(255,64,64);
	background: rgba(255,64,64,.3);
}
.notification.success {
	border: 1px solid rgb(64,255,64);
	background: rgba(64,255,64,.3);
}
input.error {
	border-bottom: 2px solid rgb(255,128,128);
}

.button-group button {
	opacity: .3;
	background: transparent;
}
.button-group button:hover {
	opacity: .7;
}
.button-group button.active {
	opacity: 1;
	background: rgba(255,255,255,.2);
}
.button-group button.active:hover {
	background: rgba(255,255,255,.3);
}