/* Six-digit verification code block, shared by the portal signup and the login by code */

.verificationCodeUser-content {
	color: var(--color-n800);
	display: flex;
    flex-direction: column;
    gap: 24px;
}

.verificationCodeUser-header {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.verificationCodeUser-title {
	font-family: Open Sans;
	font-size: 24px;
	font-weight: 400;
	line-height: 36px;
	text-align: left;
	color: var(--color-n900);
}

.verificationCodeUser-wrapperForm {
	padding: 0;
	display: flex;
    flex-direction: column;
    gap: 24px;
}

.verificationCodeUser-titleForm {
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
}

.verificationCodeUser-subtitle {
	font-size: 12px;
}

.verificationCodeUser-form {
	display: flex;
    flex-direction: column;
    gap: 8px;
}

.verificationCodeUser-inputs {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    max-width: 300px;
}

.verificationCodeUser-input {
    width: 45px;
    height: 55px;
    font-size: 18px;
    text-align: center;
    border: 1px solid var(--color-n200);
    border-radius: 4px;
    outline: none;
}

.verificationCodeUser-input:focus {
    border-color: var(--portal-color-primary);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.verificationCodeUser-input-error {
	border: 1px solid var(--color-r600);
}

.verificationCodeUser-inputMsg {
	color: var(--color-r600);
	font-size: 12px;
}

.verificationCodeUser-resend,
.verificationCodeUser-anotherMethod {
	color: var(--portal-color-primary);
	cursor: pointer;
}

.verificationCodeUser-heading {
	display: flex;
	align-items: center;
	gap: 8px;
}

.verificationCodeUser-badgeExperationTime {
	padding: 4px 8px;
	font-size: 12px;
	background-color: var(--color-n75);
    color: var(--color-n600);
}