@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	src: url('/font/Ubuntu-Regular.ttf');
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 300;
	src: url('/font/Ubuntu-Light.ttf');
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300;
	src: url('/font/Ubuntu-LightItalic.ttf');
}
@font-face {
	font-family: 'Righteous';
	font-style: normal;
	font-weight: 400;
	src: url('/font/Righteous-Regular.ttf');
}

:root {
	/* The commented colors are the original, less-contrasting colors, not passing accessibility tests. */
	--colorFg: #12394A;
	/* --colorFg: #1e687b; */
	--colorFgInverse: #fff;
	--colorBg: #fff;
	--colorBgVariant: #eef7f5;
	--colorElement: #205F6F;
	/* --colorElement: #2b859c; */
	--colorElementOpaque: rgba(43,133,156, 0.3);
	--colorElementOpaque2: rgba(43,133,156, 0.05);
	--colorElementVariant: #3D808A;
	/* --colorElementVariant: #56a8b5; */
	--colorError: #cc1616;
  
	--spacingXSmall: 0.25rem;
	--spacingSmall: 0.5rem;
	--spacingTween: 0.75rem;
	--spacingMedium: 1rem;
	--spacingLarge: 1.5rem;
	--spacingXLarge: 2rem;
	--spacingXXLarge: 3rem;
	--spacingXXXLarge: 4rem;
  
	--typeFaceDefault: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif;
	--typeFaceVariant: Righteous, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif;
	--typeLineHeightTight: 1em;
	--typeSizeSmall: 0.75rem;
	--typeSizeDefault: 14px;
	--typeSizeMedium: 1.25rem;
	--typeSizeLarge: 1.5rem;
	--typeSizeXLarge: 2.5rem;
	--typeSizeXXLarge: 4rem;
	--typeWeightDefault: 300;
	--typeWeightRegular: 400;

}

* {
	  box-sizing: border-box;
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--colorBg);
	color: var(--colorFg);
	font-family: var(--typeFaceDefault);
	font-size: var(--typeSizeDefault);
	font-weight: var(--typeWeightDefault);
	margin: 0;
	padding: 0;
}

label {
	display: block;
}

input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 2px solid var(--colorElement);
	border-radius: 4px;
}

input:disabled {
	color: var(--colorBgVariant);
}

button {
	border-radius: 4px;
	border: none;
	cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  text-align: center;
  font-weight: var(--typeWeightRegular);
}

a {
	color: var(--colorFg);
}

p {
	line-height: 1.6;
	text-align: center;
	margin: var(--spacingLarge) 0;
	letter-spacing: 0.5px;
}

input,
button,
textarea {
  margin-bottom: 0;
}

hr {
	border: none;
	border-top: 3px solid var(--colorElement);
}

.arrow {
	position: absolute;
	width: 18px;
	height: 18px;
	display: block;
	background: url("img/arrow.svg") no-repeat;
	background-size: contain;
	top: 11px;

}

.confirm-dialog {
	border-radius: 10px !important;
	position: fixed !important;
}

.confirm-dialog .actions {
	border-radius: 0 0 10px 10px !important;
}

.confirm-dialog .message-section {
	font-family: var(--typeFaceDefault);
}

.confirm-dialog .message-section span {
	color: var(--colorFg);
}

.confirm-dialog .actions button {
	font-family: var(--typeFaceVariant);
	letter-spacing: 1px;
	border-radius: 4px;
}

@media print {
	:root {
		--colorFg: #12394A;
		--colorElement: #205F6F;
		--colorElementVariant: #3D808A;
	}

	.welcome,
	.info-section,
	.link-section,
	.footer,
	.language img,
	.info-box,
	.info-button span,
	button,
	.calculator-title,
	.pagination,
	.pagination div,
	.pre-results,
	hr {
		display: none;
	}

	* {
		-webkit-print-color-adjust: exact;
	}

	.meta {
		margin-top: -7rem;
	}

	.header .header-content .title {
		font-size: var(--typeSizeLarge) !important;
	}

}