:root {
	--background-color: white;
	--on-background-color: black;
	--primary-color: #0C7ECF;
	--on-primary-color: white;
    --secondary-color: #CBE53C;
	--placeholder-color: #8E8E8E;
	--success-color: limegreen;
	--warning-color: gold;
	--danger-color: red;
	--link-color: dodgerblue;
	--link-visited-color: orchid;
	--default-font-size: 16px;
	--responsive-font-size: clamp(var(--min-font-size-em) * 1em, var(--min-font-size-em) / 120 * 100vw + var(--min-font-size-em) * 0.5em, var(--min-font-size-em) * 1.5em);
	--default-font-family: "Helvetica", sans-serif;
	--serif-font-family: "Garamond", serif;
	--cursive-font-family: "Charmonman", cursive;
	--default-font-weight: 400;
	--thin-font-weight: 350;
	--border-thickness: 0.2em;
	--border-radius: 1em;
    --border-color: #EEEEEE;
    --border: var(--border-thickness) solid var(--border-color);
	--section-default-padding-vertical: clamp(1em, 0.83vw + 0.5em, 1.5em); /* same as responsive font size formula */
	--section-default-padding-horizontal: max(1em, env(safe-area-inset-left));
	--transition-duration: 200ms;
	--paragraph-max-width: 72ch;
	--mobile-nav-screen-width: 827px;
	--header-gap: 1.75em;
	--header-height: calc(2 * var(--header-gap) + env(safe-area-inset-top));
}
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: black;
        --on-background-color: white;
        --border-color: #505050;
    }
}
* {
	margin: 0em;
	box-sizing: border-box;
	padding: 0em;
}
html {
	scroll-behavior: smooth;
}
body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 100dvh;
	background-color: var(--background-color);
	font-family: var(--default-font-family);
	font-size: var(--default-font-size);
	color: var(--on-background-color);
	-webkit-text-size-adjust: 100%;
}
.backToTop {
	position: fixed;
	right: min(1em, 5vw);
	bottom: min(1em, 5vw);
	z-index: 1;
	display: grid;
	place-items: center;
	opacity: 0;
	border: var(--border);
	border-radius: 50%;
	border-width: calc(var(--border-thickness) / 2);
	width: 2em;
	aspect-ratio: 1 / 1;
	font-size: 2em;
	color: var(--on-primary-color);
	background-color: var(--primary-color);
	cursor: pointer;
	pointer-events: none;
	transition-duration: var(--transition-duration);
}
@media (hover: hover) {
	.backToTop:hover {
		scale: 1.1;
	}
}
.backToTop.visible {
	opacity: 1;
	pointer-events: unset;
}

/* Modal */

.modal {
	--gap: 1em;
	position: fixed;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--gap);
	margin: auto;
	border: none;
	border-radius: var(--border-radius);
	max-width: 500px;
	width: 80vw;
	min-width: 300px;
	max-height: 90vh;
	padding: var(--gap);
}
.modal::backdrop {
	opacity: 0.4;
	background-color: black;
	pointer-events: none;
}
.modal__icon {
	display: grid;
	place-items: center;
	font-size: 4.5em;
}
.modal__icon.fa-info-circle,
.modal__icon.fa-download,
.modal__icon.fa-question-circle {
	color: var(--primary-color)
}
.modal__icon.fa-check-circle {
	color: var(--success-color);
}
.modal__icon.fa-exclamation-triangle {
	color: var(--warning-color);
}
.modal__icon.fa-times-circle {
	color: var(--danger-color);
}
.modal__heading {
	font-size: 1.75em;
	font-weight: var(--default-font-weight);
	text-align: center;
	word-break: break-word;
}
.modal__message {
	overflow: auto;
	font-weight: var(--default-font-weight);
}
.modal__message p {
	margin-left: 0em;
	font-size: 1em;
}
.modal .inputWrapper {
	margin: auto;
}
.downloadDropdown {
	display: grid;
	grid-template-columns: 2.25em fit-content(16em) 2.25em;
	grid-template-rows: auto 0fr 0fr 0fr;
	align-items: stretch;
	column-gap: var(--border-thickness);
	row-gap: 0em;
	margin: auto;
	text-align: center;
	transition-duration: var(--transition-duration);
}
.downloadDropdown.open {
	grid-template-rows: auto 1fr 1fr 1fr;
	row-gap: var(--border-thickness);
}
.downloadLinksToggle {
	grid-row: 1;
	grid-column: 3;
	display: grid;
	place-items: center;
	border-radius: var(--border-radius);
	background-color: var(--primary-color);
	cursor: pointer;
	color: var(--background-color);
	-webkit-touch-callout: none; 
	-webkit-user-select: none;
	user-select: none;
}
.downloadLinksToggle i {
	transition-duration: var(--transition-duration);
	font-size: 1.25em;
}
.downloadDropdown.open .downloadLinksToggle i {
	rotate: -180deg;
}
.downloadLink {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 1em;
	overflow: hidden;
	border-radius: var(--border-radius);
	padding: 0em 1em;
	background-color: var(--primary-color);
	text-decoration: none;
	color: var(--background-color);
}
.downloadLink.selected {
	grid-row: 1;
}
.downloadLink__icon {
	flex-shrink: 0;
	width: 1.2em;
	font-size: 1.75em;
	text-align: center;
}
.downloadLink__text {
	flex-grow: 1;
	margin: 1.25em 0em;
}
.modal__buttonContainer {
	display: flex;
	justify-content: flex-end;
	gap: var(--gap);
}
.modal__button {
	font-size: 0.9em;
}

/* Header and Footer */

header, footer {
	padding: 1em;
	padding-left: max(1em, env(safe-area-inset-left));
	padding-right: max(1em, env(safe-area-inset-right));
}

/* Header */

header {
	position: sticky;
	z-index: 2;
	top: 0;
	display: grid;
	place-items: center;
	grid-auto-rows: var(--header-height);
	grid-template-columns: 6.8em 1fr 6.8em;
	gap: var(--header-gap);
	border-bottom: var(--border);
	height: var(--header-height);
	padding: env(safe-area-inset-top) 0.5em 0em 0.5em;
	background-color: var(--background-color);
}

/* -- Nav */

nav, .navLink--dropDown div {
	display: flex;
	align-items: center;
	gap: var(--header-gap);
	z-index: 1;
}
nav {
	grid-column: 2;
	max-width: 100%;
	height: var(--header-gap);
	background-color: var(--background-color);
}
.navLink, .navLink--dropDown span {
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 0.05ch;
	white-space: nowrap;
	transition-duration: var(--transition-duration);
	transition-property: opacity, color;
}
.navLink--standard, .navLink--dropDown span, .navLink--standard:visited {
	opacity: 0.75;
	color: var(--on-background-color);
}
@media (hover: hover) {
	.navLink--standard:hover, .navLink--dropDown span:hover {
		color: var(--primary-color);
	}
}
.navLink--current,
.navLink--current:visited,
.navLink--dropDown:has(.navLink--current) span {
	opacity: 1;
	color: var(--primary-color);
}
.navLink--home {
	grid-row: 1;
	grid-column: 1;
	z-index: 2;
	max-width: 100%;
}
.navLink--home img {
	content: url('/IMAGES/logoLarge.png');
	display: block;
	max-width: 100%;
}
.navLink--download {
	grid-row: 1;
	grid-column: 3;
	place-self: center;
	z-index: 2;
	margin-left: auto;
}
.navLink--dropDown {
	position: relative;
}
.navLink--dropDown input {
	display: none;
}
.navLink--dropDown span {
	display: grid;
	grid-template-columns: 1fr 1em;
	place-items: center;
	gap: 0.5em;
}
.navLink--dropDown span::after {
	content: "\f078";
	font: var(--fa-font-solid);
	font-size: 1em;
	transition-duration: var(--transition-duration);
	transition-property: rotate;
}
.navLink--dropDown:has(input:checked) span::after {
	rotate: -180deg;
}
@media (hover: hover) {
	.navLink--dropDown:hover span::after {
		rotate: -180deg;
	}
}
.navLink--dropDown div {
	flex-direction: column;
}
.navLink--dropDown > div {
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% 0%;
	opacity: 0;
	overflow: auto;
	max-height: calc(100dvh - var(--header-height));
	padding: var(--header-gap);
	transition-duration: var(--transition-duration);
	transition-property: opacity, color;
	pointer-events: none;
}
.navLink--dropDown:has(input:checked) > div {
	opacity: 1;
	pointer-events: unset;
}
@media (hover: hover) {
	.navLink--dropDown:hover > div {
		opacity: 1;
		pointer-events: unset;
	}
}
.navLink--dropDown > div::before {
	content: "";
	position: absolute;
	inset: 0;
	top: 0.975em;
	border: var(--border);
	border-top: unset;
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	background-color: var(--background-color);
}
.navLink--dropDown div:only-child {
	overflow: auto;
}
#navToggleInput, .navToggle {
	display: none;
}
@media only screen and (width <= calc(827 / 16 * 1em)) {
	nav {
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
	}
	.navLink--home {
		grid-column: 2;
	}
	.navLink--home img {
		content: url('/IMAGES/logoSmall.png');
		border-radius: calc(10px * 0.7);
		max-width: unset;
		height: calc(57px * 0.7);
	}
	.navLink--dropDown span {
		grid-template-columns: 1em 1fr 1em;
	}
	.navLink--dropDown span::before {
		content: "";
	}
	.navLink--dropDown > div {
		max-height: 25em;
	}
	.navToggle {
		--gap: 0.4em;
		flex-shrink: 0;
		grid-row: 1;
		grid-column: 1;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
		gap: var(--gap);
		margin-right: auto;
		width: calc(var(--gap) * 5);
		height: calc(var(--gap) * 5);
		cursor: pointer;
	}
	.navToggle_line {
		transform-origin: center center;
		border-radius: var(--border-radius);
		height: var(--gap);
		background-color: var(--primary-color);
	}
	#navToggleInput:checked ~ nav {
		opacity: unset;
		visibility: unset;
		flex-direction: column;
		width: 100vw;
		height: 100dvh;
		padding: var(--header-gap);
		padding-top: var(--header-height);
		font-size: 1.25em;
	}
	.navToggle:has(~ #navToggleInput:checked) .navToggle_line:nth-child(1) {
		transform: translateY(calc(var(--gap) * 2)) rotate(45deg);
	}
	.navToggle:has(~ #navToggleInput:checked) .navToggle_line:nth-child(2) {
		opacity: 0;
	}
	.navToggle:has(~ #navToggleInput:checked) .navToggle_line:nth-child(3) {
		transform: translateY(calc(var(--gap) * -2)) rotate(-45deg);
	}
}

/* Footer */

footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25em;
	border-top: var(--border);
	padding-bottom: max(1em, env(safe-area-inset-bottom));
	background-color: var(--on-background-color);
	color: var(--background-color);
	text-align: center;
	overflow-wrap: anywhere;
}
footer .copyrightInfo,
footer .legalLinks,
footer .socialLinks {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
footer span {
	font-size: 0.8em;
}
footer .legalLinks span {
	overflow-wrap: normal;
}
footer .socialLinks {
	gap: 0.5em;
	padding: 0.25em;
}
footer .socialLinks i {
	font-size: 1.5em;
}

/* Main */

main {
	flex-grow: 1;
}
h1, h2, h3 {
	text-align: center;
	color: var(--primary-color);
}
h1 {
	--min-font-size-em: 2;
	font-size: clamp(var(--min-font-size-em) * 1em, var(--min-font-size-em) / 120 * 100vw + var(--min-font-size-em) * 0.5em, var(--min-font-size-em) * 1.5em);
}
h2 {
	--min-font-size-em: 1.5;
	font-size: clamp(var(--min-font-size-em) * 1em, var(--min-font-size-em) / 120 * 100vw + var(--min-font-size-em) * 0.5em, var(--min-font-size-em) * 1.5em);
}
h3 {
	--min-font-size-em: 1.2;
	font-size: clamp(var(--min-font-size-em) * 1em, var(--min-font-size-em) / 120 * 100vw + var(--min-font-size-em) * 0.5em, var(--min-font-size-em) * 1.5em);
}
p {
	--min-font-size-em: 1;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--paragraph-max-width);
	font-size: clamp(var(--min-font-size-em) * 1em, var(--min-font-size-em) / 120 * 100vw + var(--min-font-size-em) * 0.5em, var(--min-font-size-em) * 1.5em);
	line-height: 1.3em;
}
p + p {
	margin-top: 0.5em;
}
a {
	color: var(--link-color);
}
a:visited {
	color: var(--link-visited-color);
}
.primaryButton, .primaryButton:visited {
	outline: none;
	border: none;
	border-radius: var(--border-radius);
	padding: 0.5em 1em;
	background-color: var(--primary-color);
	cursor: pointer;
	font-weight: var(--default-font-weight);
	text-align: center;
	text-decoration: none;
	color: var(--on-primary-color);
	transition-duration: var(--transition-duration);
}
@media (hover: hover) {
	.primaryButton:hover {
		scale: 1.1;
	}
}
.downloadButton::before {
	content: attr(title);
}
.downloadButton--small {
	display: grid;
	place-items: center;
	border-radius: 50%;
	padding: 0.5em;
}
.downloadButton--small::before {
	content: "\f019";
	width: 1em;
	height: 1em;
	font: var(--fa-font-solid);
	font-size: 1.1em;
}
@media only screen and (width <= calc(827 / 16 * 1em)) {
	header .downloadButton {
		display: grid;
		place-items: center;
		border-radius: 50%;
		padding: 0.5em;
	}
	header .downloadButton::before {
		content: "\f019";
		width: 1em;
		height: 1em;
		font: var(--fa-font-solid);
		font-size: 1.1em;
	}
}
.MeddApp {
	font-weight: bold;
}
.MeddApp::before {
	content: "Medd";
	color: var(--primary-color);
}
.MeddApp::after {
	content: "App";
	color: var(--secondary-color);
}

/* -- Section */

section {
	width: 100%;
	padding: var(--section-default-padding-vertical) var(--section-default-padding-horizontal);
	font-weight: var(--default-font-weight);
}

/* -- Inverted */

section.inverted {
	background-color: var(--primary-color);
	color: var(--on-primary-color);
}
section.inverted h2,
section.inverted h3 {
	color: var(--on-primary-color);
}

/* -- -- Heading */

.section--heading {
    padding-top: 2em;
	text-align: center;
}
.section--heading h1 {
	width: 100%;
}
.section--heading h1:not(:last-child) {
	margin-bottom: 0.3em;
}
.section--heading p {
	--min-font-size-em: 1.3;
	font-size: clamp(var(--min-font-size-em) * 1em, var(--min-font-size-em) / 120 * 100vw + var(--min-font-size-em) * 0.5em, var(--min-font-size-em) * 1.5em);
}

/* -- -- Text */

.section--text {
	margin: auto;
	max-width: calc(var(--paragraph-max-width) + 2 * var(--section-default-padding-horizontal));
}
.section--text :is(h2, h3, h4, h5) {
	margin-bottom: 0.19em;
	text-align: center;
}
.section--text :is(h2, h3, h4, h5):not(:first-child) {
	margin-top: 0.38em;
}

/* -- -- Fields */

.section--fields {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}

/* -- -- Buttons */

.section--buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}
.section--buttons input {
	flex-basis: 0em;
	width: auto;
	min-width: 18ch;
	font-size: 1.2em;
	white-space: normal;
}
.section--buttons .buttonHint {
	--margin: -0.6em;
	opacity: 0.5;
	font-size: 0.95em;
}

/* -- -- Download */

.section--download {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	text-align: center;
}
.section--download button {
	font-size: 1.25em;
}

/* Input */

input, button, textarea {
	appearance: none;
	-webkit-appearance: none;
	border: var(--border);
	border-radius: var(--border-radius);
	outline: none;
	padding: 0.5em 0.75em;
	background-color: var(--background-color);
	font-size: 1em;
	font-family: inherit;
	color: inherit;
}
textarea {
	min-height: 10em;	
}
input:focus-visible, button:focus-visible, textarea:focus-visible {
	border-color: var(--primary-color);
}

/* -- Wrapper */

.inputWrapper {
	position: relative;
	margin: 0em 1em;
	width: calc(100% - 2em);
	max-width: 50ch;
}
.inputWrapper.required::before {
	content: "\2a";
	position: absolute;
	top: 50%;
	left: -1.5em;
	transform: translateY(-50%);
	font: var(--fa-font-solid);
	font-size: 0.5em;
	color: red;
	line-height: inherit;
}
.inputWrapper :is(input, textarea, .iti) {
	width: 100%;
}
.inputWrapper input[name] {
	padding-right: 2em;
}
.inputWrapper:has(input[name])::after {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	font: var(--fa-font-solid);
	font-size: 1.3em;
	color: var(--primary-color);
}
.inputWrapper:has(input[name="filter"])::after {
	content: "\f0b0";
}

/* -- InlTelInput */

.iti:focus-within .iti__selected-flag, .iti:focus-within input {
	border-color: var(--primary-color);
}
.iti__selected-flag {
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
	border: var(--border);
	border-right: none;
	outline: none;
}
.iti__country-list {
	border-radius: var(--border-radius);
}
::placeholder, select:invalid, input[type="date"] + label {
	color: var(--placeholder-color);
}

/* List */

.iconBulletList {
	--bullet-margin: 2.5em;
	margin-left: var(--bullet-margin);
	margin-bottom: 0.5em;
	list-style-type: none;
}
.iconBulletList li {
	position: relative;
	line-height: 1.5em;
}
.iconBulletList li:not(:last-child) {
	margin-bottom: 0.5em;
}
.iconBulletList li::before {
	--font-size-em: 1.5;
	content: attr(data-bullet);
	position: absolute;
	left: calc(0em - (var(--bullet-margin) / 2 / var(--font-size-em)));
	font: var(--fa-font-solid);
	font-size: calc(1em * var(--font-size-em));
	line-height: inherit;
	translate: -50% 0%;
}