@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
	--max-container-width: 400px;
	--max-item-width: 382px;
	--border-radius: 8px;
	--brand-primary: #4f39eb;
	--brand-primary-dark: #423dcf;
	--success-green: #0aa651;
	--error-red: #e7343e;
	--yellow: #f1b10b;
	--orange: #f08567;
	--singpass-red: #f4333d;

	/* Colors */
	--c-black: #000;
	--c-brand: #4f39eb;
	--c-brand-08: rgba(79, 57, 235, 0.08);
	--c-brand-dark: #423dcf;
	--c-brand-secondary: #f0f0fd;
	--c-brand-transparent: #ead7e7;
	--c-brand-violet: #4944e2;
	--c-violet: #9747ff;
	--c-gray: #eaedf3;
	--c-gray-draft: #e3e7ef;
	--c-gray-40: rgba(234, 237, 243, 0.4);
	--c-gray-light: #f2f4f8;
	--c-gray-dark: #7b7890;
	--c-gray-deep: #575c67;
	--c-white: #ffffff;
	--c-green: #0aa651;
	--c-red: #e7343e;
	--c-red-light: #f3d9dc;
	--c-yellow: #f1b10b;
	--c-orange: #f08567;
	--c-singpass-red: #f4333d;
	--c-brown-light: #ebdfc0;
	--c-brown: #7e5f10;
	--c-yellow-dark: #a37809;

	--dark-gray: #b3b9c7;
	--deep-gray: #575c67;

	--border-color: #ced4da;

	--bg-primary: #f5f6f8;
	--bg-secondary: #eaedf3;
	--bg-container: #ffffff;

	font-family: "Poppins", sans-serif !important;

	--font-10: 0.625rem;
	--font-12: 0.75rem;
	--font-14: 0.875rem;
	--font-16: 1rem;
	--font-18: 1.125rem;
	--font-20: 1.25rem;
	--font-24: 1.5rem;
	--font-28: 1.75rem;

	box-sizing: border-box;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
button,
textarea,
fieldset,
input[type="submit"],
input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	cursor: pointer;
	outline: inherit;
	font-family: inherit;
}

html,
body {
	max-width: 100vw;
	min-height: 100vh;
	overflow-x: hidden;
	background-color: var(--bg-primary);

	padding-top: env(safe-area-inset-top);
	padding-right: env(safe-area-inset-right);
	padding-bottom: env(safe-area-inset-bottom);
	padding-left: env(safe-area-inset-left);
}
main {
	display: flex;
	flex-flow: column;
	align-items: center;
	transition: 300ms margin ease;

	@media screen and (min-width: 500px) {
		margin-block-start: 4rem;
	}
}

section.container {
	display: flex;
	flex-flow: column;
	padding: 2rem;
	max-width: var(--max-container-width);
	width: 100%;

	border-radius: 0.5rem;
	background: white;
	box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.1);

	& .logo {
		width: 80px;
		margin-block-end: 2rem;
	}

	& .back-action {
		margin-block-end: 1rem;
	}
	& h1 {
		font-size: var(--font-24);
		margin-block-end: 0.5rem;

		&:not(+ p) {
			margin-block-end: 1.5rem;
		}
	}

	& .description-text {
		color: var(--c-gray-deep);
		font-size: var(--font-14);
		font-style: normal;
		font-weight: 400;
		line-height: 20px;
		margin-block-end: 1rem;
	}
}

.social-providers {
	list-style-type: none;
	list-style-position: inside;
	display: flex;
	flex-flow: column;
	gap: 1rem;
	align-items: center;
}

.input-group {
	display: flex;
	flex-flow: column;
	gap: 0.5rem;

	& .label-required {
		color: var(--c-red);
	}

	& .input-error {
		color: var(--c-red);
		font-size: var(--font-14);
	}
}

input {
	&.text {
		border-radius: var(--border-radius);
		border: 1px solid var(--border-color);
		font-size: var(--font-14);
		width: 100%;
		padding: 0.5rem 1rem;
	}
}

.checkbox-container {
	cursor: pointer;
	display: flex;
	flex-flow: row;
	gap: 0.5rem;
	color: var(--c-gray-deep);
	font-size: var(--font-12);

	& * {
		cursor: pointer;
	}
}

.password-input-container {
	position: relative;

	.password-toggle {
		position: absolute;
		right: 0.5rem;
		top: 0px;
		height: 100%;

		& input {
			display: none;
		}

		& > label {
			height: 100%;
			display: flex;
			flex-flow: column;
			justify-content: center;
		}

		& svg {
			--size: 1.5rem;
			width: var(--size);
			height: var(--size);
			color: var(--c-gray-dark);
			cursor: pointer;
			&:hover {
				color: var(--c-brand);
			}
		}
		& .visible > svg {
			color: var(--c-brand);
		}
	}
}
.password-forgot {
	width: 100%;
	display: flex;
	flex-flow: row;
	justify-content: flex-end;
}

.register,
.have-account {
	display: flex;
	flex-flow: row;
	gap: 0.25rem;
	justify-content: center;
	font-size: var(--font-14);
	color: var(--c-gray-deep);
}

.has-error {
	color: var(--c-red);
}

.flex-column {
	display: flex;
	flex-flow: column;
}

.flex-row {
	display: flex;
	flex-flow: row;
}

.center {
	justify-content: center;
	align-items: center;
}

.gap-sm {
	gap: 0.5rem;
}

.gap-md {
	gap: 1rem;
}

button {
	cursor: pointer;

	&[disabled] {
		cursor: inherit;
	}
}

.display-message {
	max-width: var(--max-item-width);
	color: var(--c-gray-deep);
	font-size: var(--font-14);
	margin-block-end: 1rem;
}

.radio-option {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
	gap: .25rem;

	& label {
		display: inline-block;
	}
	& label,
	input {
		cursor: pointer;
		display: inline;
	}
	& h3 {
		color: black;
	}
}

.otp-qr {
	margin: 0 auto;
}

ul.account-select {
	display: flex;
	flex-flow: column;
	gap: 0.5rem;

	& .account-select-option {
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;

		border: 1px solid var(--border-color);
		border-radius: 0.5rem;
		padding: 0.5rem 1rem;
		width: 100%;
		color: var(--c-brand);
		font-size: var(--font-14);
	}
}

.requirements {
	display: flex;
	flex-flow: column;
	gap: 0.25rem;

	& li {
		display: flex;
		align-items: center;
		font-size: var(--font-14);

		&::before {
			content: '';
			display: inline-block;
			top: 50%;
			left: 0;
			width: 1rem;
			height: 1rem;
			margin-right: 0.5rem;

			background-size: contain;
			background-repeat: no-repeat;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7.00004 12.3333C5.58555 12.3333 4.229 11.7713 3.2288 10.7712C2.22861 9.77096 1.66671 8.41441 1.66671 6.99992C1.66671 5.58543 2.22861 4.22888 3.2288 3.22868C4.229 2.22849 5.58555 1.66659 7.00004 1.66659C8.41453 1.66659 9.77108 2.22849 10.7713 3.22868C11.7715 4.22888 12.3334 5.58543 12.3334 6.99992C12.3334 8.41441 11.7715 9.77096 10.7713 10.7712C9.77108 11.7713 8.41453 12.3333 7.00004 12.3333ZM7.00004 0.333252C6.12456 0.333252 5.25765 0.50569 4.44882 0.840722C3.63998 1.17575 2.90505 1.66682 2.286 2.28587C1.03575 3.53612 0.333374 5.23181 0.333374 6.99992C0.333374 8.76803 1.03575 10.4637 2.286 11.714C2.90505 12.333 3.63998 12.8241 4.44882 13.1591C5.25765 13.4941 6.12456 13.6666 7.00004 13.6666C8.76815 13.6666 10.4638 12.9642 11.7141 11.714C12.9643 10.4637 13.6667 8.76803 13.6667 6.99992C13.6667 6.12444 13.4943 5.25753 13.1592 4.4487C12.8242 3.63986 12.3331 2.90493 11.7141 2.28587C11.095 1.66682 10.3601 1.17575 9.55126 0.840722C8.74243 0.50569 7.87552 0.333252 7.00004 0.333252Z" fill="%23575C67"/></svg>');
		}

		&.valid::before {
			background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6.66671 11.3333L3.33337 7.99992L4.27337 7.05325L6.66671 9.44658L11.7267 4.38658L12.6667 5.33325M8.00004 1.33325C7.12456 1.33325 6.25765 1.50569 5.44882 1.84072C4.63998 2.17575 3.90505 2.66682 3.286 3.28587C2.03575 4.53612 1.33337 6.23181 1.33337 7.99992C1.33337 9.76803 2.03575 11.4637 3.286 12.714C3.90505 13.333 4.63998 13.8241 5.44882 14.1591C6.25765 14.4941 7.12456 14.6666 8.00004 14.6666C9.76815 14.6666 11.4638 13.9642 12.7141 12.714C13.9643 11.4637 14.6667 9.76803 14.6667 7.99992C14.6667 7.12444 14.4943 6.25753 14.1592 5.4487C13.8242 4.63986 13.3331 3.90493 12.7141 3.28587C12.095 2.66682 11.3601 2.17575 10.5513 1.84072C9.74243 1.50569 8.87552 1.33325 8.00004 1.33325Z" fill="%23423DCF"/></svg>');
		}
	}
}

.checkbox label,
.radio label {
	min-height: 20px;
	padding-left: 20px;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
	font-size: 14px;
}

h1 {
	font-size: 24px;
	font-weight: 500;
	color: black;
	line-height: 32px;
}

p {
	font-size: 14px;
	font-weight: 400;
	color: #000000;
	line-height: 20px;
}

label {
	font-style: normal;
	font-weight: 400;
	line-height: 1rem;
	font-size: var(--font-14);
	color: var(--c-gray-deep);
}

a {
	color: var(--c-brand);
	font-size: var(--font-14);
	text-decoration: none;
	display: inline-block;
	height: 100%;
}

.btn {
	border: none;
	border-radius: 0.5rem;
	padding: 0.5rem 2rem;
	width: 100%;
	height: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--c-white);
	font-size: var(--font-14);

	&:focus {
		outline: 1px solid var(--c-brand-dark);
	}

	&.btn-primary {
		background: var(--c-brand);
	}
	&.btn-secondary {
		background: var(--bg-secondary);
		color: var(--c-gray-deep);
	}
}

#resend-email-link {
	font-size: var(--font-14);
}