html, body.auth-page { min-height: 100%; }

body.auth-page {
    align-items: center;
    background:
        linear-gradient(rgba(64, 78, 103, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(64, 78, 103, .035) 1px, transparent 1px),
        radial-gradient(circle at 8% 10%, rgba(45, 125, 50, .19) 0, rgba(45, 125, 50, 0) 28%),
        radial-gradient(circle at 92% 88%, rgba(64, 78, 103, .20) 0, rgba(64, 78, 103, 0) 31%),
        linear-gradient(135deg, #f5f9f7 0%, #e7eef3 48%, #edf7f0 100%) !important;
    background-size: 32px 32px, 32px 32px, auto, auto, auto;
    display: flex;
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    justify-content: center;
    min-height: 100vh;
    padding: 28px 16px;
    position: relative;
}

body.auth-page:before, body.auth-page:after {
    border-radius: 50%;
    content: '';
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

body.auth-page:before {
    background: linear-gradient(135deg, rgba(22, 130, 77, .20), rgba(22, 130, 77, .02));
    box-shadow: inset 0 0 0 32px rgba(255, 255, 255, .12);
    height: 430px;
    left: -175px;
    top: -185px;
    width: 430px;
}

body.auth-page:after {
    background: linear-gradient(135deg, rgba(64, 78, 103, .22), rgba(64, 78, 103, .03));
    bottom: -205px;
    box-shadow: inset 0 0 0 38px rgba(255, 255, 255, .14);
    height: 510px;
    right: -205px;
    width: 510px;
}

.auth-page .app-content, .auth-page .content-wrapper, .auth-page .content-body, .auth-page .flexbox-container {
    background: transparent;
    min-height: auto;
    position: relative;
    width: 100%;
    z-index: 1;
}

.auth-page .auth-shell {
    max-width: 920px;
    padding: 0;
    position: relative;
    width: 100%;
}
.auth-page .auth-shell.auth-shell--wide { max-width: 860px; }

.auth-page .auth-shell:before, .auth-page .auth-shell:after {
    border-radius: 50%;
    content: '';
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.auth-page .auth-shell:before {
    border: 1px solid rgba(22, 130, 77, .16);
    box-shadow: 0 0 0 18px rgba(22, 130, 77, .035), 0 0 0 42px rgba(22, 130, 77, .02);
    height: 94px;
    left: -45px;
    top: 52px;
    width: 94px;
}

.auth-page .auth-shell:after {
    background: #2e7d32;
    box-shadow: 0 0 0 8px rgba(46, 125, 50, .12), 0 0 0 20px rgba(46, 125, 50, .05);
    bottom: 38px;
    height: 12px;
    right: -18px;
    width: 12px;
}

.auth-page .auth-card {
    background: linear-gradient(135deg, rgba(255,255,255,.97) 0%, rgba(252,255,253,.94) 60%, rgba(244,251,247,.96) 100%);
    border: 1px solid rgba(255,255,255,.8) !important;
    border-radius: 20px;
    box-shadow: 0 26px 65px rgba(23, 35, 60, .16), 0 3px 10px rgba(22, 130, 77, .06) !important;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.auth-page .auth-card:before {
    background: linear-gradient(90deg, #404e67 0%, #2e7d32 100%);
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.auth-page .auth-card .card-header {
    background: linear-gradient(180deg, rgba(238, 248, 241, .76) 0%, rgba(255,255,255,0) 100%);
    border: 0;
    padding: 34px 40px 12px;
}
.auth-page .auth-card .card-body { padding: 24px 40px 30px; }
.auth-page .auth-card .card-footer { background: rgba(242, 249, 245, .86); border: 0; border-top: 1px solid rgba(22, 130, 77, .08); padding: 18px 40px; }
.auth-page .auth-shell--wide .card-header { padding-top: 28px; }
.auth-page .auth-shell--wide .card-body { padding-top: 18px; padding-bottom: 24px; }
.auth-page .auth-shell--wide form > br { display: none; }
.auth-page .auth-shell--wide .form-group { margin-bottom: 12px !important; }
.auth-page .auth-shell--wide .card-footer { padding-top: 14px; padding-bottom: 14px; }
.auth-page .auth-brand {
    align-items: center;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #eef8f1 56%, #dbeee2 100%);
    border: 1px solid rgba(22, 130, 77, .12);
    border-radius: 50%;
    box-shadow: 0 10px 22px rgba(22, 130, 77, .12), inset 0 1px 0 rgba(255,255,255,.8);
    display: flex;
    height: 84px;
    justify-content: center;
    margin: 0 auto 16px;
    width: 84px;
}
.auth-page .auth-brand img { height: 62px; object-fit: contain; width: 62px; }
.auth-page .auth-kicker { color: #16824d; font-size: .72rem; font-weight: 700; letter-spacing: .1em; margin: 0 0 8px; text-transform: uppercase; }
.auth-page .auth-title { color: #17233c; font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.auth-page .auth-subtitle { color: #64748b; font-size: .9rem; margin: 8px 0 0; }
.auth-page .auth-card .form-group { margin-bottom: 18px !important; }
.auth-page .auth-card label { color: #334155; font-size: .84rem; font-weight: 600; margin-bottom: 7px; }
.auth-page .auth-card .form-control { border: 1px solid #dbe4ee; border-radius: 9px; box-shadow: none; min-height: 48px; padding-left: 42px; }
.auth-page .auth-card .form-group:not(.has-icon-left) .form-control { padding-left: 14px; }
.auth-page .auth-card .form-control:focus { border-color: #16824d; box-shadow: 0 0 0 3px rgba(22,130,77,.12); }
.auth-page .auth-shell:not(.auth-shell--wide) .form-horizontal { margin: 0 auto; max-width: 620px; }
.auth-page .auth-card .form-control-position { align-items: center; background: #eef8f1; border-radius: 7px; color: #16824d; display: flex; height: 34px; justify-content: center; left: 7px; top: 7px; width: 34px; }
.auth-page .auth-card .has-icon-left .form-control { padding-left: 54px; }
.auth-page .auth-shell--wide .form-control-position { top: 32px; }
.auth-page .auth-card .btn { background: #16824d; border-color: #16824d; border-radius: 9px; font-weight: 700; min-height: 48px; }
.auth-page .auth-card .btn:hover, .auth-page .auth-card .btn:focus { background: #0e663a; border-color: #0e663a; }
.auth-page .auth-card .card-link { color: #16824d; font-weight: 700; }
.auth-page .auth-card .alert { border-radius: 9px; font-size: .86rem; }
.auth-page .auth-card .help-block { font-size: .76rem; }
.auth-page .auth-captcha { display: flex; justify-content: center; }

@media (max-width: 575px) {
    body.auth-page { align-items: flex-start; overflow-x: hidden; padding: 14px 10px; }
    .auth-page .flexbox-container { display: block !important; height: auto !important; min-height: calc(100vh - 28px) !important; }
    .auth-page .flexbox-container > .col-12 { align-items: flex-start !important; min-height: calc(100vh - 28px) !important; padding: 0 !important; }
    .auth-page .auth-shell, .auth-page .auth-shell.auth-shell--wide { max-width: 520px; }
    .auth-page .auth-card .card-header { padding: 26px 22px 8px; }
    .auth-page .auth-card .card-body { padding: 20px 18px 24px; }
    .auth-page .auth-card .card-footer { padding: 16px 22px; }
    .auth-page .auth-title { font-size: 1.35rem; }
    .auth-page .auth-shell--wide .row { margin-left: -8px; margin-right: -8px; }
    .auth-page .auth-shell--wide .row > [class*="col-"] { margin-bottom: 8px; padding-left: 8px; padding-right: 8px; }
    .auth-page .auth-shell--wide .form-group { margin-bottom: 8px !important; }
    .auth-page .auth-shell--wide .card-footer p { float: none !important; text-align: center !important; }
    .auth-page .auth-captcha { justify-content: flex-start; min-height: 66px; overflow: hidden; }
    .auth-page .auth-captcha .g-recaptcha { transform: scale(.82); transform-origin: left top; }
    .auth-page .auth-card .btn-lg { font-size: .95rem; }
    .auth-page .auth-shell:before { height: 62px; left: -25px; top: 38px; width: 62px; }
    .auth-page .auth-shell:after { bottom: 24px; right: -5px; }
}