:root {
	--colorApp: var(--colorAppBC);
	--colorAppHover: var(--colorAppHoverBC);
}

.bc-register{
	min-height: 100vh;
}

.bc-register .card{
	background-color: white;
	border: none;
	box-shadow: var(--boxShadow);
	margin-block: 2rem;
	width: 37.5rem;
	padding: 2rem 3rem 3rem;
}

.bc-register .card p{
	font-size: 0.85rem;
	/* line-height: var(--copyTextLineHeight); */
}

.bc-register .lbb-logo{
	display: none;
}

.bc-register .lbb-logo-small{
	width: 4rem;
}

.bc-register img[alt="N1 Logo"]{
	width: 4rem;
	margin-left: 0.5rem;
}

.stepbystep-progress {
	display: flex;
	justify-content: space-between;
	gap: 0.4rem;
	margin-bottom: 3rem;
}
.stepbystep-progress > div {
	width: 100%;
	height: 1rem;
	background-color: hsl(0, 0%, 89%);
}
.stepbystep-progress span {
	display: block;
	width: 0;
	height: 1rem;	
	background-color: var(--colorApp);
	
}
.stepbystep-progress span.active {
	transition: width 200ms ease-in;
}
.stepbystep-progress span.paced,
.stepbystep-progress span.active {
	width: 100%;	
}
.stepbystep-content .two-cols {
	display: flex;
	gap: 1rem;
}
.stepbystep-content .two-cols .stepbystep-textblock {
	width: 23rem;
}
.stepbystep-content .qr-code {
	width: 15rem;
	margin-right: 4rem;
}
.stepbystep-content .two-cols .stepbystep-mediablock {
	flex: 1;
	box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}
.stepbystep-content h6 {
	font-family: semi-bold;
    font-size: var(--copyTextFontSize);
	line-height: var(--copyTextLineHeight);
	border: none;
	padding: 0;
}

.three-points-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-top: 1rem;
	margin: auto;
	width: 50rem;
}
.three-points-container .point {
	text-align: center;
	width: 14rem;
}
.three-points-container .point p {
	font-family: semi-bold;
	margin-bottom: 0;
}
.three-points-container .number-circle {
	display: grid;
	place-items: center;
	border-radius: 50%;
	background-color: var(--colorApp);
	color: #fff;
	width: 5rem;
    height: 5rem;
    margin: 0 auto 1rem;
    font-size: 2.5rem;
	font-family: semi-bold;
}

@media (min-width: 990px) {
	.bc-register .lbb-logo{
		width: 14rem;
		display: block;
	}

	.bc-register .lbb-logo-small{
		display: none;
	}

	.bc-register img[alt="N1 Logo"]{
	width: 5rem;
	margin-left: 1rem;
	}

	.bc-register .form-container .form-group{
		--label_width: 8rem;
		display: flex;
	}

	.bc-register .form-container .form-group label{
		width: var(--label_width);
	}

	.bc-register .form-container .form-group label + div{
		width: calc(100% - var(--label_width));
	}

}


@media (min-width: 1400px) {
	.lbb-logo img {
		width: 7.5rem;
	}

}