.signup-option-btns {
	.signup-btn-info {
		width: 100%;
		background: $white;
		border: 1px solid $border-color;
		border-radius: 10px;
        padding: 15px;
		margin-bottom: 16px;
		@extend %flex-align-between;
        @include transition(0.7s);
		&:hover {
			box-shadow: $box-shadow;
            @include transition(0.7s);
			.signup-arrow {
				background: $primary;
				color: $white;
                @include transition(0.4s);
			}
		}
		&:last-child {
			margin-bottom: 0;
		}
        @include respond-below(custom991) {
            @include margin-padding(0, 10px);
            margin-bottom: 20px;
        }
	}
}
		

.signup-info {
	@extend %flex__center;
	.signup-icon {
		margin-right: 16px;
	}
}
.signup-content {
	text-align: $__left;
	h4 {
		font-weight: $font-weight-semibold;
		font-size: $font-size-20;
		margin-bottom: 0;
        @include respond-below(custom991) {
            font-size: $font-size-18;
        }
	}
	p {
		color: $text-color;
		margin-bottom: 0;
		font-size: $font-size-14;
	}
}
.signup-arrow {
	width: 40px;
	height: 40px;
	background: $gray-transparent;
	color: $gray-900;
	font-size: $font-size-24;
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
    @include transition(0.4s);
	flex-shrink: 0;
}
.terms-check-box {
	label {
		a {
			color: $gray-900;
			font-weight: $font-weight-medium;
			&:hover {
				color: $primary;
			}
		}
	}
}
.account-signup {
	text-align: $__center;
	margin-top: 40px;
	p {
		margin-bottom: 0;
		a {
			font-weight: $font-weight-medium;
			color: $primary;;
			&:hover {
				color: $primary-hover;
			}
		}
	}
}
.otp-box {
	margin-bottom: 40px;
	.forms-block {
		@extend %flex-align-between;
		@include respond-below(custom767) {
			justify-content: start;
		}
	}
	input {
		width: 70px;
		height: 70px;
		background: $white;
		border: 1px solid $border-color;
		border-radius: 10px;
		text-align: $__center;
		margin-right: 24px;
		font-weight: $font-weight-semibold;
		font-size: $font-size-20;
		color: $gray-900;
		outline: $__none;
		&:last-child {
			margin-right: 0;
		}
		&:focus {
			border-color: $primary;
		}
		@include respond-below(custom991) {
			width: 68px;
			height: 68px;
		}
		@include respond-below(custom767) {
			width: 60px;
			height: 60px;
			font-size: $font-size-18;
		}
	}
}
.otp-info {
	@extend %flex-align-between;
}
.otp-code {
	p {
		margin-bottom: 0;
		a {
			font-weight: $font-weight-medium;
			color: $primary;
			&:hover {
				color: $primary-hover;
			}
		}
	}
}
.otp-sec {
	p {
		background: $danger-100;
		border-radius: 20px;
		color: $danger;
		font-size: $font-size-10;
		font-weight: $font-weight-medium;
		padding: 4px 7px;
		@extend %inlineflex-align-center;
		margin-bottom: 0;
		i {
			margin-right: 5px;
		}
	}
}
.forgot-link {
	font-weight: $font-weight-medium;
	color: $primary;
	margin-bottom: 4px;
	@include transition(0.7s);
	&:hover {
		color: $primary-hover;
		@include transition(0.7s);
	}
}
.form-group-flex {
	@extend %flex-align-between;
}
.signup-code {
	font-size: $font-size-14;
	margin-top: 4px;
}
.multistep-form {
	#first {
		display: $__block;
	}
	fieldset {
		display: $__none;
		width: $__full__width;
	}
}
.widget-setcount {
	padding-bottom: 30px;
	ul {
		@include margin-padding(0, 0);
		@extend %display-flex;
		@extend %flex__between;
		@extend %flex__wrap;
		list-style: $__none;
		li {
			margin-right: 0;
			margin-bottom: 10px;
			position: $__relative;
			&:last-child {
				margin-right: 0;
				&:before {
					display: $__none;
				}
			}
			&:before {
				position: absolute;
				top: 50%;
				right: -66px;
				content: "";
				width: 50px;
				height: 2px;
				background: $border-color;
			}
		}
	}
	.step-box {
		@extend %flex-align-center;
	}
	.step-icon {
		width: 42px;
		height: 42px;
		background: $primary;
		border-radius: 50px;
		margin-right: 8px;
		@extend %flex-align-center;
		color: $white;
		opacity: 20%;
	}
	.step-content {
		p {
			font-size: $font-size-14;
			font-weight: $font-weight-medium;
			margin-bottom: 0;
			opacity: 20%;
		}
		h4 {
			font-weight: $font-weight-semibold;
			font-size: $font-size-16;
			margin-bottom: 0;
			opacity: 20%;
		}
	}
	.progress-activated {
		.step-icon {
			background: $primary;
			opacity: 1;
		}
		.step-content {
			p {
				opacity: 1;
			}
			h4 {
				opacity: 1;
			}
		}
	}
	.progress-active {
		.step-icon {
			background: $primary;
			opacity: 1;
		}
		.step-content {
			p {				
				opacity: 1;
			}
			h4 {				
				opacity: 1;
			}
		}
	}
}

.form-check-box .custom_check {
	margin-bottom: 0;
}
.form-check-box .custom_check .checkmark::after {
    top: 50%;
    left: 50%;
	@include transform(translate(-50%, -50%));
}