*
{
	font-size: 1em;
}

html, body {
    font-family: nexa, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html
{
	width: 100%;
}

body
{
	width: auto;
	margin: 1em;

	min-width: 50em;
}

/*******************************************************************************************************************************

Header and logo

*******************************************************************************************************************************/

header
{
	color: #fff;
	
	background-color: #186183;
	position: relative;
	height: auto;
	min-height: 6em;
	width: auto;
	padding: .5em;

	display: flex;
	/*justify-content: center;*/
	align-items: center;

	/*padding-left: 6em;
	padding-right: 6em;*/

	/*display: flex;
	
		align-items: center;
		justify-content: center;*/
	


	border-radius: 1em 1em 0 0;
}

header a
{
	float: left;

	color: #fff;
	font-weight: bold;
	/*display: inline-block;*/


	font-size: 1.5em;
	text-decoration: none;
	

	/*text-align: center;*/
	/*position: absolute;
	top: 0;
	bottom: 0;*/
	/*height: 100%;
	*/
}

header a img
{
	max-height: 4em;
	/*min-height: 4em;*/
	display: block;
	float: left;
	/*display: inline-block;
height: 100%;*/
	/*position: absolute;
left: 0;
top: .5em;
height: 80%;
display: inline-block;*/
}

header a div
{
	/*display: inline-block;
	height: 100%;*/
	float: left;
}

header span
{
	display: block;
}

header a div span:first-child + span
{
	font-weight: normal;
	font-size: .8em;
}

header p
{
	font-size: 1em;
	right: 1em;
	position: absolute;
	max-width: 40%;
}

/*******************************************************************************************************************************

Unordered list with benefit tiles

*******************************************************************************************************************************/

ul
{
	list-style: none;
}

ul li
{
	float: left;

	width: 18%;

	border: 1px solid #186183;
	border-radius: 1em;
	padding: 1em;
	min-height: 15em;
	text-align: center;
}

ul li img
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

ul li
{
	margin-right: 1em;
}

/*******************************************************************************************************************************

Ordered list with custom circled numbers

*******************************************************************************************************************************/

ol
{
	list-style: none;
	counter-reset: item-counter;

	padding-left: 0;
}

ol li
{
	position: relative;

	float: left;
	width: 10em;

	padding: 1em;
}

ol li::before
{
	content: counter(item-counter);
	counter-increment: item-counter;

	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;

	background-color: #186183;
	color: #fff;
	font-size: 1em;

	display: flex;
	align-items: center;
	justify-content: center;
}

ul li img,
ol li img,
p + section img
{
	max-width: 5em;
	max-height: 5em;

	border: 1px solid #186183;
	background-color: #fff;

	border-radius: 50%;
	overflow-clip-margin: padding-box;
	padding: 2em;
	object-fit: contain;

	margin-bottom: 1em;
}

ul li img,
p + section img
{
	max-width: 4em;
	max-height: 4em;
	padding: 1em;
}

p + section img
{
	border: none;
	background-color: #8DD5F2;
	float: left;
	/*margin-bottom: 3em;*/
	/*height: 100%;*/
	margin-right: 1em;
	clear: none;
}



ol li p
{
	padding: 0;
}

/***************************************************************

Arrows...

***************************************************************/

ol li + li
{
	/*padding-left: 4em;*/
}

ol li
{
	padding-right: 4em;
}

ol li:last-child
{
	padding-right: 0;
}

ol li::after
{
	content: "\21E2";
	font-size: 3em;

	position: absolute;
	right: .2em;
	top: 20%;
	
}

ol li:last-child::after
{
	content: none;
}


section
{
	clear: both;
	padding-top: 1em;
	padding-bottom: 1em;
}


/*******************************************************************************************************************************

The "problem and solution" pane

*******************************************************************************************************************************/

p + section
{
	clear: none;
}

p + section h3
{
	font-size: 1.5em;
}

p + section
{
	background-color: #fff;
	border-radius: 1em;
	float: left;
	width: 70%;
	padding: 1em;
}

p + section div
{
	float: left;

	width: 45%;
	padding-left: 1em;
	margin-top: 0;
	margin-bottom: 0;
	/*margin: 1em;*/
	margin-right: 0;
}

p + section div:first-child
{
	border-right: 1px solid #000;
	padding-right: 1em;
}

p + section div + div
{
	/*border-left: 1px solid #000;*/
	margin-left: 0;
}

p + section p
{
	float: right;
}

p + section img
{
	width: 2em;
}

/*******************************************************************************************************************************

"How it works"

*******************************************************************************************************************************/

#how-it-works ol
{
	display: flex;
	justify-content: center;
	/*align-items: center;*/
}


footer
{
	min-height: 3em;
	padding: 1em;
	background-color: #8DD5F2;/* #186183;*/
	border-radius: 0 0 1em 1em;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

footer img
{
	height: 3em;
}

footer span
{
	padding: .5em;
}

h1
{
	font-size: 1.8em;
	display: inline-block;
}

h2
{
	color: #023E73;/*#84cbeb;*/
	background-color: #8DD5F2;/*#186183;*/
	/*display: inline-block;
	top: 3em;
	position: absolute;*/
	font-size: 1.2em;

	margin: 0;
	padding: 1em;
	text-align: center;
	/*border-top: 1px solid #84cbeb;*/
}

/*
h3, h4, h5
{
	padding: 1em;
}*/

h5
{
	font-weight: normal;
	font-style: italic;
}

h2 span
{
	
	/*color: #fff;*/
	font-weight: bold;
}

main
{
	background-color: #E1EBF0;
	padding-bottom: 1em;
	padding: 1em;
}

main > img
{
	float: right;
	width: 10em;
	margin: 1em;
}

form, p
{
	/*width: 80%;*/
	width: auto;
	/*padding: 1em;*/
}

form label
{
	display: block;
	/*position: relative;*/
	margin: 2em;

}

label input,
label select,
label textarea,
label span
{
	float: right;
	width: 70%;
}

label select
{

}

textarea
{
	min-height: 10em;
}

form button
{
	display: block;
	clear: both;
}

fieldset
{
	border-color: #186183;
	margin-top: 1em;
	margin-bottom: 1em;
	border-radius: 1em;
}

legend
{
	color: #186183;
}

button[type="submit"]
{
	margin-left: auto;
	margin-right: auto;
	min-width: 8em;
	min-height: 2em;
	border-radius: 1em;
}

/*

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

*/