@{
    ViewBag.Title = "Login / Registro";
}

@section Styles {
	<style>
        .box {
            width: 500px;
            margin: 200px 0;
        }

        .shape1 {
            position: relative;
            height: 150px;
            width: 150px;
            background-color: #0074d9;
            border-radius: 80px;
            float: left;
            margin-right: -50px;
        }

        .shape2 {
            position: relative;
            height: 150px;
            width: 150px;
            background-color: #0074d9;
            border-radius: 80px;
            margin-top: -30px;
            float: left;
        }

        .shape3 {
            position: relative;
            height: 150px;
            width: 150px;
            background-color: #0074d9;
            border-radius: 80px;
            margin-top: -30px;
            float: left;
            margin-left: -31px;
        }

        .shape4 {
            position: relative;
            height: 150px;
            width: 150px;
            background-color: #0074d9;
            border-radius: 80px;
            margin-top: -25px;
            float: left;
            margin-left: -32px;
        }

        .shape5 {
            position: relative;
            height: 150px;
            width: 150px;
            background-color: #0074d9;
            border-radius: 80px;
            float: left;
            margin-right: -48px;
            margin-left: -32px;
            margin-top: -30px;
        }

        .shape6 {
            position: relative;
            height: 150px;
            width: 150px;
            background-color: #0074d9;
            border-radius: 80px;
            float: left;
            margin-right: -20px;
            margin-top: -35px;
        }

        .shape7 {
            position: relative;
            height: 150px;
            width: 150px;
            background-color: #0074d9;
            border-radius: 80px;
            float: left;
            margin-right: -20px;
            margin-top: -57px;
        }

        .float {
            position: absolute;
            z-index: 2;
        }

        .form {
            margin-left: 145px;
        }
	</style>

}

		<div id="login-row" class="row justify-content-center align-items-center">
			<div id="login-column" class="col-md-6">
				<div class="box">
					<div class="shape1"></div>
					<div class="shape2"></div>
					<div class="shape3"></div>
					<div class="shape4"></div>
					<div class="shape5"></div>
					<div class="shape6"></div>
					<div class="shape7"></div>
					<div class="float">
                        <br />
                        <br />
                        @using (Html.BeginForm("ExternalLogin", "Login", new { provider = "Microsoft" }, FormMethod.Post, true, new { id = "externalLoginForm", style = "margin-left: 150px" }))
						{
							@Html.AntiForgeryToken()
							<button type="submit" class="btn btn-success btn-block login">Login with Microsoft</button>
						}
                        <br />
                        @using (Html.BeginForm("ExternalLoginGoogle", "Login", new { provider = "Google" }, FormMethod.Post, true, new { id = "externalLoginForm", style = "margin-left: 150px" }))
						{
							@Html.AntiForgeryToken()
							<button type="submit" class="btn btn-success btn-block login">Login with Google</button>
						}
					</div>
				</div>
			</div>
		</div>