body{
	margin: 0;
	background-color: #eed;
	color: #332;
}
.err{
	margin: 4px;
	padding: 0 4px;
	background-color: #f22;
	box-shadow: 0.7px 0.7px 1.5px #000c;
	border-radius: 1px;
}
fieldset{
	background-color: #ffe;
	margin: 0.7em 4px 4px;
	padding: 0 3px 3px;
	border: none;
	border-radius: 0.3em;
	box-shadow: 0.7px 0.7px 1.5px #000c;
	flex-grow: 1;
}
legend{
	background-color:  #887;
	color: #ffe;
	padding: 2px 8px;
	margin: 0.3em;
	font: 1.1em bold;
	border-radius : 0.2em;
	box-shadow: 0.7px 0.7px 1.5px #000c;
}
table{
	width: 100%;
	margin: 0;
	border-spacing: 0 1px;
}
th{
	background-color: #887;
	color : #ffe;
	padding: 0;
	font-size: 0.9em;
	height: 1.7rem;
	background-clip: padding-box;
	border-left : 1px solid transparent;
}
td{
	background: #eed;
	padding: 0;
	margin: 0;
	height: 1.7rem;
	background-clip: padding-box;
	border-left : 1px solid transparent;
}
td.res{
	padding: 0 0px;
	font-size: 1.1em;
	text-align: right;
}
table.res{
	width: auto;
	margin-left: 4px;
	border-collapse: collapse;
}
table.res td{
	background-color: transparent;
	padding: 2px 0;
}
.res{	padding: 0;	}

td.inp{	padding: 0;	}

td.but{
	text-align: center;
	padding: 0;
}
.unit{	font-size: 0.8em;	}

input, select{
	height: 1.7rem;
	margin: 0;
	box-sizing: border-box;
}
input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="date"], select{
	font-size: 1.1em;
	padding : 2px 1px;
	border-style: none;
	border-radius: 1px;
	box-shadow: inset 0.7px 0.7px 1.5px #000c;
}
input[type="text"]:invalid, input[type="number"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid{
	background-color: #fbb;
}
input[type="number"]{	text-align : end;	}

input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="date"]:focus, select:focus{
	background-color: #ffe;
	outline : 0;
}

.buttonContainer {
	width: 100%;
	margin-top: 3px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding : 4px;
}

.buttonContainer>*{
	flex : initial;
	margin-right : 8px;
}
.buttonContainer>*:last-child{
	margin: 0px;
	margin-right : 4px;
}

td a, .buttonContainer a{
	text-decoration: none;
	text-align: center;
}

input[type="button"], input[type="reset"], input[type="submit"], .buttonContainer a, .button{
	width: 5em;
	background-color: #887;
	color: #eee;
	text-shadow: 0.5px 0.5px 1px #000d;
	flex : initial;
	border : none;
	padding : 1px;
	padding: 2px 6px;
	font-size: 1.0em;
	box-shadow: 1px 1px 3px #0008;
	border-radius: 3px;
}
input[type="button"]:hover, input[type="reset"]:hover,
input[type="submit"]:hover, .buttonContainer a:hover, .button:hover{
	background-color: #998;
	color: #fff;
	box-shadow: 0px 0px 5px #aa98;
}
input[type="button"]:disabled{
	background-color: #9984;
	color: #fff4;
	box-shadow: 0px 0px 0px #aa90;
	filter: blur(0.4px);
}
input[type="submit"], input.pink, a.pink {
	background-color: #e88;
}
input[type="submit"]:hover, input.pink:hover, a.pink:hover{
	background-color: #f99;
}

select {
	width : 100%;
}

label{	width: 100%;	}

.SFont{	font-size: 0.9em;	}

.XSFont{	font-size: 0.7em;	}

.bold {
	font-weight: bold;
	font-size: 1.2em !important;
	line-height: 1.2em;
	vertical-align: middle;
}

@media (max-width: 28rem)	{
	th{		font-size: 1em;	}
	body {	font-size: small;	}
	.SFont{	font-size: 0.9em !important;	}
	.XSFont{font-size: 0.8em !important;	}
}
@media (min-width: 28rem) {
	body {	font-size: medium;	}
}
form {
	display: flex;
	flex-wrap:	wrap;
}
@media (prefers-color-scheme: dark) {
	input, select{
		background-color: #eed;
		color: #221;
	}
	body {
		background-color: #332;
		color: #ddc;
	}
	fieldset {	background-color: #443;	}

	td{
		background: #332;
		background-clip: padding-box;
		border-left: 1px solid transparent;
	}
}