
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Asorock.com - Log in</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />

</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/">Asorock.com</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            


<h1>Log in</h1>

<div class="row">

        <div class="col-md-6 order-md-1 mb-4 mb-md-0">
            <section>
                <h4>Sign in with</h4>
                <hr />

                <form id="external-account" method="post" action="/Identity/Account/ExternalLogin?returnUrl=%2FContent%2FSat%2Fcas%2Fcss%2FWeb_Fluid%2F4%2Fv1131i.min.css">

                    <button type="submit"
                            class="fb-btn ext-btn mb-2"
                            name="provider"
                            value="Facebook"
                            title="Continue with Facebook">
                        <img src="/content/signin/fb-glyph.png" alt="Facebook logo" class="fb-icon" />
                        Continue with Facebook
                    </button>

                    <!-- Apple button (image or CSS) -->
                        <button type="submit"
                                class="apple-btn ext-btn"
                                name="provider"
                                value="Apple"
                                aria-label="Sign in with Apple">
                            <!-- left logo -->
                            <svg class="apple-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                                <path fill="currentColor"
                                      d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282" />
                            </svg>

                            <!-- perfectly centered text -->
                            <span class="apple-label">Sign in with Apple</span>
                        </button>



                        <button type="submit"
                                class="google-btn ext-btn"
                                name="provider"
                                value="Google"
                                aria-label="Continue with Google">

                            <!-- left Google “G” -->
                            <svg class="google-icon" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
                                <path fill="#EA4335" d="M24 9.5c3.3 0 6.3 1.1 8.6 3.3l6.4-6.4C34.9 2.5 29.8 0 24 0 14.6 0 6.5 5.4 2.6 13.3l7.9 6.1C12.1 12.9 17.5 9.5 24 9.5z" />
                                <path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-2.7-.4-3.9H24v7.3h12.6c-.6 3.2-2.6 6-5.6 7.9l8.6 6.7c5-4.6 7.9-11.3 7.9-18z" />
                                <path fill="#FBBC05" d="M10.5 28.7A14.5 14.5 0 0 1 10 24c0-1.6.3-3.2.8-4.7l-7.9-6.1A24 24 0 0 0 0 24c0 3.8.9 7.3 2.6 10.6l7.9-5.9z" />
                                <path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.8-5.8l-8.6-6.7c-2.3 1.5-4.6 2.3-7.2 2.3-6.9 0-12.7-4.6-14.7-11.1l-7.9 5.9C6.5 42.6 14.6 48 24 48z" />
                            </svg>

                            <!-- centered label -->
                            <span class="google-label">Continue with Google</span>
                        </button>

                <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Iz9-2Unf6NNn-X_hhpv-iyVgwE2UJQeNgs8hcyRQiVH8WhPUYuSMJLINAivZBO_R4YBK3L9bcCdo4GPBSMkDTNEQwABhRALCp16qZWFeU17-FpTEBchoWg8iCSLfSh8Y0y4kaS3nomY2oepr8r7JsM" /></form>
            </section>
        </div>
    <div class="col-md-4 order-md-2">
        <section>
            <form id="account" method="post">
                <h4>Use a local account</h4>
                <hr />

                <div class="text-danger validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>

                <div class="form-group">
                    <label for="Input_UserName">UserName</label>
                    <input class="form-control" type="text" data-val="true" data-val-required="The UserName field is required." id="Input_UserName" name="Input.UserName" value="" />
                    <span class="text-danger field-validation-valid" data-valmsg-for="Input.UserName" data-valmsg-replace="true"></span>
                </div>

                <div class="form-group">
                    <label for="Input_Password">Password</label>
                    <input class="form-control" type="password" data-val="true" data-val-required="The Password field is required." id="Input_Password" name="Input.Password" />
                    <span class="text-danger field-validation-valid" data-valmsg-for="Input.Password" data-valmsg-replace="true"></span>
                </div>

                <div class="checkbox mb-3">
                    <label for="Input_RememberMe">
                        <input type="checkbox" data-val="true" data-val-required="The Remember me? field is required." id="Input_RememberMe" name="Input.RememberMe" value="true" />
                        Remember me?
                    </label>
                </div>

                <button type="submit" class="btn btn-primary w-100">Log in</button>

                <div class="mt-3">
                    <a href="/Identity/Account/ForgotPassword">Forgot your password?</a><br />
                        <a href="/Identity/Account/Register?returnUrl=%2FContent%2FSat%2Fcas%2Fcss%2FWeb_Fluid%2F4%2Fv1131i.min.css">Register as a new user</a>
                </div>
            <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Iz9-2Unf6NNn-X_hhpv-iyVgwE2UJQeNgs8hcyRQiVH8WhPUYuSMJLINAivZBO_R4YBK3L9bcCdo4GPBSMkDTNEQwABhRALCp16qZWFeU17-FpTEBchoWg8iCSLfSh8Y0y4kaS3nomY2oepr8r7JsM" /><input name="Input.RememberMe" type="hidden" value="false" /></form>
        </section>
    </div>
</div>

<style>

    /* === External auth buttons — drop-in replacement === */
    :root {
        --ext-btn-maxw: 320px;
        --ext-btn-h: 40px;
        --ext-btn-radius: 8px;
    }

    .ext-btn {
        display: flex; /* center icon + label as a group */
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 16px;
        height: var(--ext-btn-h);
        width: min(100%, var(--ext-btn-maxw));
        margin: 0 auto 12px;
        border-radius: var(--ext-btn-radius);
        border: 0;
        box-sizing: border-box;
        cursor: pointer;
        text-decoration: none;
        /* unified type */
        font: 600 14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
        line-height: 1;
    }

        .ext-btn:focus-visible {
            outline: 3px solid #4c9ffe;
            outline-offset: 2px;
        }

        .ext-btn:disabled {
            opacity: .6;
            cursor: not-allowed;
        }

    /* Normalize icons across providers */
    .fb-icon, .apple-icon, .google-icon {
        width: 18px;
        height: 18px;
        display: block;
        flex: 0 0 18px;
    }

    /* Provider skins */
    .fb-btn {
        background: #1877F2;
        color: #fff;
    }

        .fb-btn:hover {
            background: #166fe5;
        }

    .apple-btn {
        background: #000;
        color: #fff;
    }

        .apple-btn:hover {
            filter: brightness(1.08);
        }

    .google-btn {
        background: #fff;
        color: #3c4043;
        border: 1px solid #dadce0;
    }

        .google-btn:hover {
            box-shadow: 0 1px 2px rgba(0,0,0,.2);
        }

    /* Small-screen padding */
    @media (max-width:575.98px) {
        .row > div {
            padding-left: 8px;
            padding-right: 8px;
        }
    }


</style>




        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - Asorock.com - <a href="/Home/Privacy">Privacy</a>
        </div>
    </footer>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js?v=2glEAKHarViN9JHAjHImFInzKzoT1UMU5sgH_enFqNA"></script>
    
    <script src="/js/validation-native.js?v=mz3Wu5Iopw_8Rrx-uTn6t_HS1nNugKzowGcNn6WlNlA"></script>


</body>
</html>
