/* Sign-in and password reset pages (layouts/auth.blade.php) */
html, body.auth-page { height: 100%; }
body.auth-page {
    margin: 0;
    background: #ecf0f5;
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}
.auth-wrap { display: flex; min-height: 100%; }

/* Left: photo with brand */
.auth-hero {
    position: relative;
    flex: 1 1 55%;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.auth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(23, 63, 95, .88) 0%, rgba(60, 141, 188, .55) 100%);
}
.auth-hero-inner {
    position: absolute;
    left: 56px;
    right: 56px;
    bottom: 64px;
}
.auth-brand { font-size: 30px; font-weight: 600; letter-spacing: .3px; }
.auth-brand .fa { margin-right: 6px; }
.auth-tagline { margin-top: 10px; font-size: 18px; opacity: .9; max-width: 460px; }

/* Right: form */
.auth-panel {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: #fff;
}
.auth-card { width: 100%; max-width: 380px; }
.auth-brand-compact { display: none; color: #3c8dbc; font-size: 22px; margin-bottom: 24px; }
.auth-card h1 { margin: 0 0 6px; font-size: 26px; font-weight: 600; }
.auth-card .auth-subtitle { margin: 0 0 28px; color: #777; }
.auth-card label { font-weight: 600; }
.auth-card .form-control { height: 42px; box-shadow: none; }
.auth-card .input-group-addon { background: #f7f9fb; color: #888; min-width: 42px; }
.auth-card .btn-toggle-password { height: 42px; color: #777; }
.auth-card .btn-primary { height: 44px; font-size: 16px; background: #3c8dbc; border-color: #367fa9; }
.auth-card .btn-primary:hover, .auth-card .btn-primary:focus { background: #367fa9; }
.auth-card .help-block { margin-bottom: 0; }
.auth-card .caps-warning { display: none; color: #c87f0a; font-size: 13px; margin-top: 6px; }
.auth-footer { margin-top: 32px; color: #999; font-size: 13px; }

@media (max-width: 767px) {
    .auth-hero { display: none; }
    .auth-panel { flex-basis: 100%; justify-content: flex-start; padding-top: 56px; }
    .auth-brand-compact { display: block; }
}