html, body, div, span, input, textarea, keygen, select, button, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video {
    font-size: 100%;
}
body, input, textarea, keygen, select, button {
    font-family: "ProximaNova", arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
}

* {
    box-sizing: border-box;
}

*:before,*:after {
    box-sizing: border-box;
}

body {
    color: #191919;
    background-color: #f2f2f2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

a {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
}

a,a:active, a:visited {
    color: var(--login-primary, #2A7AB0);
    text-decoration: underline;
}

a:hover,a:focus {
    outline: none;
    text-decoration: underline;
    cursor: pointer;
}

.login-bg {
    height: 100%;
    background: url("../images/login-background.jpg") center no-repeat;
    background-size: cover;
}

.login-bg--dark {
    background: url("../images/login-background-dark.svg") center no-repeat;
}


/* Manager keeps the legacy web login composition: a dark form pane on the left and
   the Manager-owned property image on the right. The class is set from the OAuth
   client metadata, so other portals never inherit this treatment.

   The layout is mobile-first. The narrow form-only experience is the base, declared
   exactly once, and the two-column desktop pane is layered on at >=901px. A native
   mobile client carries the --form-only modifier, which holds it at the base layout
   however wide its WebView is. Encoding the layout mode rather than the client type
   is what lets the narrow geometry live in a single place. */
.login-bg--manager {
    --login-background: #153D58;
    --login-link-color: #a9c9e7;

    /* Google's reCAPTCHA v2 checkbox is a fixed-width iframe that cannot shrink. The
       gutter yields so the card always keeps at least that much content width;
       overflowing it was the largest source of per-handset drift. The expression is
       continuous in viewport width, so there is no breakpoint to snap across.
       Viewports narrower than the iframe (a folded inner-screen cover display) still
       overflow; no supported handset is that narrow in portrait. */
    --recaptcha-checkbox-width: 304px;
    --manager-login-gutter: min(16px, max(0px, (100vw - var(--recaptcha-checkbox-width)) / 2));

    --manager-login-pane-width: 100%;
    --manager-login-pane-padding: 24px var(--manager-login-gutter) 88px;
    --manager-login-card-width: 100%;
    --manager-login-title-size: 30px;
    --manager-login-logo-width: 190px;
    --manager-login-logo-height: 74px;
    --manager-login-logo-margin: 18px;
    --manager-login-label-gap: 16px;
    --manager-login-action-gap: 28px;

    background: var(--login-background);
    color: #fff;
    overflow-x: hidden;
}

/* The desktop composition. Only the token values and the background pane differ; the
   rules that consume them are shared with the narrow layout below. */
@media (min-width: 901px) {
    .login-bg--manager:not(.login-bg--manager--form-only) {
        --manager-login-pane-width: 50%;
        --manager-login-pane-padding: 50px 0;
        --manager-login-card-width: 60%;
        --manager-login-title-size: 36px;
        --manager-login-logo-width: 236px;
        --manager-login-logo-height: 92px;
        --manager-login-logo-margin: 50px;
        --manager-login-label-gap: 28px;
        --manager-login-action-gap: 55px;
        position: relative;
        isolation: isolate;
    }

    .login-bg--manager:not(.login-bg--manager--form-only)::after {
        content: "";
        position: fixed;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        width: 50%;
        background: var(--login-background) url("../images/sign-in-bg-spring-2020.jpg") 100% 100% / cover no-repeat;
        pointer-events: none;
    }
}

.login-bg--manager .login {
    position: relative;
    z-index: 10;
    width: var(--manager-login-pane-width);
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--manager-login-pane-padding);
}

.login-bg--manager .login__card {
    width: var(--manager-login-card-width);
    /* Never narrower than the reCAPTCHA iframe unless the viewport itself is. */
    min-width: min(var(--recaptcha-checkbox-width), 100%);
    max-width: 460px;
    padding: 0;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.login-bg--manager .login__sign-in-text {
    margin: 20px 0 34px;
    color: #fff;
    font-size: var(--manager-login-title-size);
    font-weight: 600;
    line-height: 1.2;
}

.login-bg--manager .form__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.login-bg--manager .login__button,
.login-bg--manager .login__sign-in-button {
    width: 100%;
}

.login-bg--manager .global-login-logo__container {
    margin-bottom: var(--manager-login-logo-margin);
}

.login-bg--manager .global-login-logo__logo {
    width: var(--manager-login-logo-width);
    height: var(--manager-login-logo-height);
    max-width: 100%;
}

.login-bg--manager .login__password-label {
    margin-top: var(--manager-login-label-gap);
}

/* The row wraps rather than overflowing: "Remember my email" and "Forgot password?"
   cannot both fit on one line on the narrowest handsets, and letting them wrap keeps
   the row height a function of content rather than of handset. */
.login-bg--manager .login__action-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 8px;
    row-gap: 8px;
    margin-bottom: var(--manager-login-action-gap);
}

.login-bg--manager .login__action-section .pull-left,
.login-bg--manager .login__action-section .pull-right {
    float: none;
    min-width: 0;
}

.login-bg--manager .login__action-section .pull-left {
    flex: 1 1 auto;
}

.login-bg--manager .login__footer,
.login-bg--manager .login__register-account__label {
    color: #fff;
}

.login-bg--manager .login__sign-in-divider-span {
    background: var(--login-background);
    color: #fff;
}

.login-bg--manager .login__footer-link,
.login-bg--manager a {
    color: var(--login-link-color);
}

.login-bg--manager .g-recaptcha {
    position: relative;
    z-index: 20;
    display: block;
    min-height: 78px;
    opacity: 1;
    visibility: visible;
}

/* login.css caps this to calc(100vw - 130px) below 480px, which makes the warning a
   different width on every handset. The Manager card is already capped, so the banner
   can just fill it. */
.login-bg--manager .login-site-data-warning__text {
    max-width: 100%;
}

/* The reCAPTCHA badge is fixed to the lower-right corner. The pane's bottom padding
   clears it, so the footer keeps the full text width instead of being squeezed into a
   taller column on narrow handsets. */
.login-bg--manager .login__agreements {
    padding: 0;
}

.global-login-logo__logo--dark {
  
}

@media (max-width: 640px) {
    .login-bg {
        background-size: auto;
    }
}

.login {
    height: 100%;
    width: 100%;
    padding: 100px 0;
}

@media (min-width: 480px) and (max-width: 640px) {
    .login {
        padding: 50px 25px;
    }
}
@media (max-width: 480px) {
    .login {
        padding: 10px;
    }
}

/* DELETE ME when checkbox pattern updated */
.checkbox-list__item .form-element__checkbox:focus + .form-element__checkbox-label:before {
    color: #5E9569;
}

/* Utils */
.text-color-primary-default {
    color: #5E9569 !important;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 34px;
    word-break: break-word
}

.text-color-primary-manager {
    color: #2F2F31 !important;
    font-weight: 400;
    font-size: 28px;
    word-break: break-word;
}

.text-color-primary-admin {
    color: #153D58 !important;
    font-weight: 600;
    font-size: 28px;
    word-break: break-word;
    margin-top: -40px;
    opacity: 0.9;
}

.text-color-primary-admin__dark {
    color: #DBDBDC !important;
}

.text-color-primary-resident {
    color: var(--login-primary, #000000) !important;
    font-weight: bold;
    font-size: 34px;
    word-break: break-word;
    margin-top: -40px;
    opacity: 0.9;
    text-align: center;
}

.global-login-logo__container {
    padding: 20px 0 30px 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 34px;
    word-break: break-word;
    display: grid;
    justify-content: center;
}

.global-login-logo__logo {
    height: 92px;
    width: 236px;
}

.global-login-logo--admin {
    background: url("../images/buildium_admin_logo.svg") center no-repeat;
    background-size: contain;
}

.global-login-logo--resident {
    background: url("../images/resident_center_logo.png") center no-repeat;
    background-size: contain;
}

.global-login-logo--manager {
    background: url("../images/buildium-logo.svg") center no-repeat;
    background-size: contain;
}

.global-login-logo--admin__dark {
    background: url("../images/buildium_admin_logo_dark.svg") center no-repeat;
    background-size: contain;
}

.global-login-logo__logo--resident {
    margin-left: -40px !important;
    height: 100px;
}

.login-logo__container {
    padding: 40px 0 24px;
}

/* An account-uploaded logo is a raster of arbitrary aspect ratio, so it is bounded rather than
   sized like .global-login-logo__logo, whose fixed box works only because that logo is a CSS
   background. `margin: auto` centers it without restyling the shared container, which the Admin
   portal title also uses. Values match the Resident Center portal's own login-logo component. */
.login-logo__logo {
    display: block;
    margin: 10px auto;
    max-height: 90px;
    max-width: 100%;
    object-fit: contain;
}

/* .text-color-primary-* pulls a title up under the logo above it; in the company-name fallback
   there is no logo above, so that negative margin would crowd the top of the card. */
.login-logo__company-name {
    margin-top: 0;
}

/* Names the product when an account's logo has replaced the Buildium one. Matches .login__label
   in the Resident Center portal, which shows the same line under the same circumstances. */
.login-logo__product-name {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 20px;
    color: #6D6D70;
    font-weight: bold;
    text-align: center;
}

.margin-bottom--lg {
    margin-bottom: 16px;
}

.pull-left {
    float: left!important
}

.pull-right {
    float: right!important
}