body,
p {
	margin: 0;
}

body {
	background-color: rgb(240, 240, 240);
}

span {
	white-space: nowrap;
}

abbr {
	text-decoration: none;
}

.center {
	margin: auto;
	min-width: min-content;
	max-width: max-content;
}

.card {
	margin: 1.25rem;
	border: 1px solid gainsboro;
	border-radius: 1rem;
	padding: 1rem;
	background-color: white;
}

.card>*,
.card section>*,
.card details>* {
	margin: 1rem 0;
}

.card>*:first-child,
.card section>*:first-child {
	margin-top: 0;
}

.card>*:last-child,
.card section>*:last-child,
.card details>*:last-child {
	margin-bottom: 0;
}

.card h1 {
	font-size: 1.375rem;
	font-weight: normal;
}

.card hr {
	border: 0;
	border-top: 1px solid gainsboro;
}

.card details>summary {
	margin: 0;
	cursor: default;
	font-size: 1.125rem;
}

.form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, fit-content));
	column-gap: 0.75rem;
	row-gap: 1rem;
	align-items: baseline;
}

.form>label {
	justify-self: end;
	text-align: right;
}

.form>div {
	white-space: nowrap;
}

.form>div>input {
	max-width: 4.5rem;
}

.form>button,
.form>output {
	width: fit-content;
	grid-column-start: 2;
}

@media (max-width: 640px) {
	body {
		background-color: white;
	}

	.card {
		margin: 0;
		border: none;
		border-radius: 0;
		padding: 0.5rem;
	}

	.form {
		column-gap: 0.375rem;
		row-gap: 0.5rem;
	}
}

.input_invalid {
	background-color: rgb(255, 217, 217);
}

.fInterpretation_risk_low {
	color: darkgreen;
}

.fInterpretation_risk_medium {
	color: black;
}

.fInterpretation_risk_high {
	color: darkred;
}

.fInterpretation_risk_very-high {
	color: darkred;
}