@import "variables";
.widget-auth {
	max-width: 420px;
	.widget-auth__head {
		h2, .h2 {
			margin-bottom: 0;
			font-size: 34px;
			font-weight: bold;
			@media (max-width: 767px){
				font-size: 24px;
			}
		}
		margin-bottom: 12px;
		.label {
			background: $blue_light;
			padding: 8px 24px 8px 8px;
			@include border-radius(0);
		}
	}
	.widget-auth__login {
		display: none;
		.widget-auth__body {
			max-width: 320px;
		}
		&.in {
			display: block;
		}
	}
	.widget-auth__or {
		padding-top: 24px;
		text-align: center;
		.or {
			background: #f5f7fa;
			display: block;
			width: 48px;
			height: 48px;
			margin: 0 auto 24px;
			font-size: 14px;
			line-height: 44px;
			@include border-radius(50%);
		}
	}
	.widget-auth__reg {
		display: none;
		&.in {
			display: block;
		}
	}
	.widget-auth__change {
		border-bottom-color: transparent;
		&:hover {
			border-bottom-color: $blue;
		}
	}

	.form-group {
		& + .form-group {
			margin-top: 12px;
		}
	}

	.form-check.active ~ .form-group.hidden {
		display: block !important;
	}
}