.login-form {
	.form-inner {
		padding-bottom: 15px;
	}

	.login {
		.register {
			position: absolute;
			top: -25px;
			right: 40px;
			height: 50px;
			width: 50px;
			background: #ffffff;
			text-align: center;
			border-radius: 100%;
			transition: 200ms ease-in-out;

			@include themify {
				border: 4px solid themed('primary');
				color: themed('black');
			}

			&:hover {
				@include themify {
					color: themed('primary');
				}
			}

			> i {
				font-size: 24px;
				margin-top: 9px;
				margin-left: 3px;
			}
		}

		.btn-login {
			margin: 5px auto 8px;
			padding: 11px 60px;
		}
	}

	.forgot-password {
		font-size: 16px;
		margin-top: 10px;
		transition: 200ms ease-in-out;

		@include themify {
			color: themed('primary');
		}

		&:hover {
			@include themify {
				color: themed('primary-hover');
			}
		}
	}
}

.form-wrapper {
	.social-login-buttons {
		margin-top: 15px;

		> span {
			font-weight: 600;
			display: block;
			margin-bottom: 10px;
		}

		.btn-facebook {
			background: #4267b2;
			color: #ffffff;
			padding: 10px 20px 8px 8px;
			transition: 200ms ease-in-out;

			&:hover {
				background: #5176c1;
			}

			> img {
				width: 30px;
				margin: -2px 15px 0 0;
			}
		}

		.btn-google {
			color: #ffffff;
			background: #4285f4;
			margin-top: 15px;
			padding: 3px 20px 1px 1px;
			transition: 200ms ease-in-out;

			&:hover {
				background: #5194ff;
			}

			> img {
				width: 44px;
				background: #ffffff;
				border-radius: 2px;
				margin: -2px 15px 0 0;
			}
		}
	}
}

@media screen and (max-width: 415px) {
	.login-form {
		.checkbox {
			float: none !important;
			display: table;
			margin: 15px auto 0;
		}

		.forgot-password {
			float: none !important;
			display: table;
			margin: 10px auto;
		}
	}
}
