:root {
	/*COLOURS*/
	/*standard*/
	--white: #FFFFFF;
	--black: #000000;
	/*neutral*/
	--neutral-70: #F7F6FD;
	--neutral-60: #F0EFFB;
	--neutral-55: #ECEBF9;
	--neutral-50: #DBD9F2;
	--neutral-45: #C0BDE6;
	--neutral-35: #ADA9D6;
	--neutral-30: #A09CC9;
	--neutral-25: #8480B2;
	--neutral-20: #6A6699;
	/*primary*/
	--primary-70: #155679;
	--primary-ar-brand: #192D38;
	/*secondary*/
	--secondary-90: #D1CDFE;
	--secondary-75: #8C82FC;
	--secondary-65: #5F51FB;
	--secondary-ar-brand: #3F32F1;
	/*positive accent*/
	--positive-accent-15: #024B1F;
	--positive-accent-20: #02642A;
	--positive-accent-30: #03963F;
	--positive-accent-40: #04C854;
	--positive-accent-ar-brand: #05E560;
	/*warning*/
	--warning-50: #FAEBD3;
	--warning-100: #F5D6A7;
	--warning-200: #F0C582;
	--warning-300: #D2912F;
	/*error*/
	--error-50: #F8CCD7;
	--error-100: #F299AE;
	--error-200: #ED6D8B;
	--error-300: #AF2043;
	/*/COLOURS*/
}

@font-face {
	font-family: "Bienvenue-Regular";
	src: url("fonts/Bienvenue/WOFF2/Bienvenue-Regular.woff2") format("woff2");
	descent-override: 0%;
}

@font-face {
	font-family: "Bienvenue-Medium";
	src: url("fonts/Bienvenue/WOFF2/Bienvenue-Medium.woff2") format("woff2");
	descent-override: 0%;
}

@font-face {
	font-family: "Bienvenue-Semibold";
	src: url("fonts/Bienvenue/WOFF2/Bienvenue-Semibold.woff2") format("woff2");
	descent-override: 0%;
}

* {
	padding: 0;
	margin: 0;
}

html {
	font-size: 16px;
}

body {
	font-family: 'Bienvenue-Regular', sans-serif;
	color: var(--primary-ar-brand);
	background-color: var(--neutral-70);
	background-image: url('../../images/v2/brilliance.svg');
	background-size: cover;
	background-attachment: fixed;
}

html, body {
	height: 100%;
	min-height: 100%;
}

h1, h2 {
	font-family: 'Bienvenue-Regular', sans-serif;
}

#app {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.textbox {
	border: 1px solid var(--neutral-45);
	border-radius: 0.75rem;
	padding: 1rem;
	color: var(--primary-70);
	font-size: 1rem;
	font-family: sans-serif;
	outline: 0;
}

	.textbox::placeholder {
		color: var(--neutral-20);
		font-style: italic;
	}

	.textbox:hover {
		border-color: var(--neutral-20);
	}

	.textbox:focus {
		border-color: var(--primary-70);
	}

.primary-button {
	border: none;
	background-color: var(--primary-70);
	padding: 1rem;
	border-radius: 0.75rem;
	color: var(--white);
	font-size: 1rem;
	font-family: 'Bienvenue-Regular', sans-serif;
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: 0;
	text-decoration: none;
}

	.primary-button.with-icon {
	}

	.primary-button > svg {
		height: 16px;
	}

	.primary-button:hover {
		background-color: var(--primary-ar-brand);
	}

	.primary-button:active {
		background-color: var(--neutral-20);
	}

.secondary-button {
	border: 2px solid var(--primary-ar-brand);
	padding: calc(1rem - 2px) 1rem;
	border-radius: 0.75rem;
	color: var(--primary-ar-brand);
	font-size: 1rem;
	font-family: 'Bienvenue-Regular', sans-serif;
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: 0;
	text-decoration: none;
}

	.secondary-button.with-icon {
		padding: calc(1rem - 3px) 1rem;
	}

	.secondary-button > svg {
		height: 16px;
	}

	.secondary-button:hover {
		background-color: var(--neutral-45);
	}

	.secondary-button:active {
		background-color: var(--primary-ar-brand);
		color: var(--neutral-70);
	}

.text-button {
	color: var(--secondary-ar-brand);
	text-decoration: none;
	cursor: pointer;
	outline: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

	.text-button:hover {
		color: var(--primary-70);
	}

		.text-button:hover svg > path {
			stroke: var(--primary-70);
		}

	.text-button:active {
		color: var(--primary-ar-brand);
	}

		.text-button:active svg > path {
			stroke: var(--primary-ar-brand);
		}

.field-validation-error {
	color: #ff0000;
}