/* Minification failed. Returning unminified contents.
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,22): run-time error CSS1039: Token not allowed after unary operator: '-auth-ground'
(67,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-ink'
(68,23): run-time error CSS1039: Token not allowed after unary operator: '-auth-font'
(108,22): run-time error CSS1039: Token not allowed after unary operator: '-auth-panel'
(162,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-ink'
(168,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-muted'
(180,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-ink-2'
(194,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-muted-2'
(206,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-ink'
(207,22): run-time error CSS1039: Token not allowed after unary operator: '-auth-field'
(208,28): run-time error CSS1039: Token not allowed after unary operator: '-auth-line'
(209,25): run-time error CSS1039: Token not allowed after unary operator: '-auth-radius'
(220,28): run-time error CSS1039: Token not allowed after unary operator: '-auth-brand'
(225,21): run-time error CSS1039: Token not allowed after unary operator: '-auth-muted'
(226,26): run-time error CSS1039: Token not allowed after unary operator: '-auth-field-ro'
(227,28): run-time error CSS1039: Token not allowed after unary operator: '-auth-line-2'
(231,32): run-time error CSS1039: Token not allowed after unary operator: '-auth-line-2'
(258,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-ink'
(259,28): run-time error CSS1039: Token not allowed after unary operator: '-auth-field'
(264,28): run-time error CSS1039: Token not allowed after unary operator: '-auth-line'
(265,25): run-time error CSS1039: Token not allowed after unary operator: '-auth-radius'
(277,28): run-time error CSS1039: Token not allowed after unary operator: '-auth-brand'
(296,28): run-time error CSS1039: Token not allowed after unary operator: '-auth-brand-deep'
(302,21): run-time error CSS1039: Token not allowed after unary operator: '-auth-ink-2'
(319,25): run-time error CSS1039: Token not allowed after unary operator: '-auth-radius'
(326,22): run-time error CSS1039: Token not allowed after unary operator: '-auth-brand-deep'
(331,26): run-time error CSS1039: Token not allowed after unary operator: '-auth-brand-deeper'
(336,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-ink-2'
(338,28): run-time error CSS1039: Token not allowed after unary operator: '-auth-line'
(343,21): run-time error CSS1039: Token not allowed after unary operator: '-auth-ink-2'
(348,33): run-time error CSS1039: Token not allowed after unary operator: '-auth-brand'
(382,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-brand-deep'
(387,21): run-time error CSS1039: Token not allowed after unary operator: '-auth-brand-deep'
(392,33): run-time error CSS1039: Token not allowed after unary operator: '-auth-brand'
(402,22): run-time error CSS1039: Token not allowed after unary operator: '-auth-line-3'
(422,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-danger-ink'
(423,22): run-time error CSS1039: Token not allowed after unary operator: '-auth-danger-bg'
(424,28): run-time error CSS1039: Token not allowed after unary operator: '-auth-danger-line'
(425,25): run-time error CSS1039: Token not allowed after unary operator: '-auth-radius'
(452,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-danger-ink'
(458,24): run-time error CSS1039: Token not allowed after unary operator: '-auth-danger'
(462,28): run-time error CSS1039: Token not allowed after unary operator: '-auth-danger'
(468,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-danger-ink'
(476,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-body'
(486,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-muted'
(504,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-brand-deep'
(505,22): run-time error CSS1039: Token not allowed after unary operator: '-auth-danger-bg'
(509,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-ok'
(510,22): run-time error CSS1039: Token not allowed after unary operator: '-auth-ok-bg'
(514,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-danger'
(515,22): run-time error CSS1039: Token not allowed after unary operator: '-auth-danger-bg'
(529,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-muted'
(546,21): run-time error CSS1039: Token not allowed after unary operator: '-auth-muted'
(555,30): run-time error CSS1039: Token not allowed after unary operator: '-auth-line-3'
(564,17): run-time error CSS1039: Token not allowed after unary operator: '-auth-muted-2'
 */
/* ============================================================================
   auth.css - the signed-out pages: login, password recovery, lockout.
   ----------------------------------------------------------------------------
   These pages render through Views/Shared/_AuthLayout.cshtml, which loads THIS
   stylesheet and nothing else. Bootstrap and Modernizr are deliberately not
   loaded on the front door, so anything the framework emits here (the
   validation classes, the _PasswordRules partial) must be styled in this file.

   Kept separate from Site.css on purpose: Site.css is 2800 lines shared by
   every signed-in screen, and a front-door restyle should not have to touch it.

   Colour rules that are load-bearing, not taste:
     - #e46317 is the brand orange. White text on it is only 3.42:1, under the
       4.5:1 floor, so it is used for focus rings and accents ONLY.
     - #c24f0d is the same hue deepened until white text clears AA at 4.72:1.
       That is why the button, the links and the brand panel all use it.
     - The brand mark cannot go on an orange surface in its two colours: its
       gear is #ec582a and disappears. The panel therefore uses the all-white
       lockup (oc-logo-horizontal-white.svg).

   Light only for now. Every colour is a token here, so a dark block can be
   added later by redefining the tokens and nothing else.
   ============================================================================ */

:root {
    --auth-ink: #231f20;            /* the wordmark black from the brand assets */
    --auth-ink-2: #3d3936;          /* field labels */
    --auth-body: #4a443f;           /* message-page prose */
    --auth-muted: #6f6862;          /* secondary copy, helper text */
    --auth-muted-2: #8a827b;        /* field icons, footnote */
    --auth-ground: #ffffff;
    --auth-field: #ffffff;
    --auth-field-ro: #f4f1ee;       /* read-only field */
    --auth-line: #d6d0cb;
    --auth-line-2: #e0dad4;
    --auth-line-3: #cdc6bf;
    --auth-brand: #e46317;          /* accents and focus rings ONLY - see above */
    --auth-brand-deep: #c24f0d;     /* white text passes AA on this */
    --auth-brand-deeper: #ab4409;   /* hover */
    --auth-panel: #c24f0d;
    --auth-danger: #b4491c;
    --auth-danger-ink: #8f2f0a;
    --auth-danger-bg: #fdf1ec;
    --auth-danger-line: #f2c3ab;
    --auth-ok: #2f7d43;
    --auth-ok-bg: #e9f3ec;
    --auth-radius: 8px;
    /* A system stack, not a webfont: this is the front door and it should not
       wait on a third-party font host to paint. */
    --auth-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

html {
    height: 100%;
}

body.auth-body {
    min-height: 100%;
    margin: 0;
    background: var(--auth-ground);
    color: var(--auth-ink);
    font-family: var(--auth-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- the split */

.auth-split {
    display: grid;
    /* min-height, not height: the reset page is the tallest of these and must
       be free to grow past one viewport and scroll rather than clip. */
    min-height: 100vh;
    grid-template-columns: 560px 1fr;
}

.auth-form {
    display: grid;
    place-items: center;
    padding: 40px 48px;
}

.auth-form-inner {
    width: 100%;
    max-width: 364px;
}

    /* Message pages carry sentences rather than fields and need the extra measure. */
    .auth-form-inner.is-wide {
        max-width: 420px;
    }

/* --------------------------------------------------------- the brand panel */

.auth-panel {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 40px;
    background: var(--auth-panel);
}

.auth-panel-wm {
    position: absolute;
    right: -150px;
    bottom: -170px;
    width: 620px;
    height: 620px;
    background: url('images/oc-gear-white.svg') no-repeat center center;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
}

.auth-panel-mark {
    position: relative;
    text-align: center;
}

.auth-panel-logo {
    display: block;
    width: 236px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.auth-panel-tag {
    margin: 18px 0 0;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: #ffffff;
}

/* ---------------------------------------------------------- the form column */

.auth-logo {
    display: block;
    width: 176px;
    margin: 0 0 22px;
}

    .auth-logo img {
        display: block;
        width: 100%;
        height: auto;
    }

.auth-h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--auth-ink);
}

.auth-sub {
    margin: 3px 0 26px;
    font-size: 13px;
    color: var(--auth-muted);
}

.auth-field + .auth-field {
    margin-top: 16px;
}

.auth-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--auth-ink-2);
}

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--auth-muted-2);
    pointer-events: none;
}

.auth-input {
    width: 100%;
    height: 44px;
    padding: 0 12px 0 38px;
    /* 17px, not 16px. iOS Safari zooms the page when a focused input is under
       16px; 17 leaves headroom. Carried over deliberately from Site.css. */
    font-size: 17px;
    font-family: inherit;
    color: var(--auth-ink);
    background: var(--auth-field);
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius);
    -webkit-appearance: none;
    appearance: none;
}

    .auth-input:hover {
        border-color: #bdb5ae;
    }

    .auth-input:focus {
        outline: none;
        border-color: var(--auth-brand);
        box-shadow: 0 0 0 3px rgba(228, 99, 23, 0.16);
    }

    .auth-input[readonly] {
        color: var(--auth-muted);
        background: var(--auth-field-ro);
        border-color: var(--auth-line-2);
    }

        .auth-input[readonly]:focus {
            border-color: var(--auth-line-2);
            box-shadow: none;
        }

.auth-input-lock {
    position: absolute;
    right: 12px;
    width: 15px;
    height: 15px;
    color: #a39b94;
    pointer-events: none;
}

.auth-input-wrap.has-lock .auth-input {
    padding-right: 38px;
}

/* The two-factor provider picker. appearance: none plus a drawn chevron, because
   a native select renders differently on every platform and would be the one
   control on these pages that does not match the fields above it. No left icon
   here, so the text starts at 12px rather than 38px. */
.auth-select {
    width: 100%;
    height: 44px;
    padding: 0 36px 0 12px;
    font-size: 17px;
    font-family: inherit;
    color: var(--auth-ink);
    background-color: var(--auth-field);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6862' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    .auth-select:hover {
        border-color: #bdb5ae;
    }

    .auth-select:focus {
        outline: none;
        border-color: var(--auth-brand);
        box-shadow: 0 0 0 3px rgba(228, 99, 23, 0.16);
    }

/* CheckBoxFor emits a checkbox plus a hidden companion input; the hidden one has
   no box of its own, so a flex row is safe here. */
.auth-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-top: 14px;
}

    .auth-check input[type="checkbox"] {
        flex: none;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--auth-brand-deep);
    }

    .auth-check label {
        margin: 0;
        font-size: 14px;
        color: var(--auth-ink-2);
        cursor: pointer;
    }

/* -------------------------------------------------------------- the buttons */

.auth-btn,
.auth-btn-2 {
    display: grid;
    place-items: center;
    width: 100%;
    height: 48px;
    margin-top: 22px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--auth-radius);
    text-decoration: none;
    cursor: pointer;
}

.auth-btn {
    color: #ffffff;
    background: var(--auth-brand-deep);
    border: 1px solid transparent;
}

    .auth-btn:hover {
        background: var(--auth-brand-deeper);
        color: #ffffff;
    }

.auth-btn-2 {
    color: var(--auth-ink-2);
    background: #ffffff;
    border: 1px solid var(--auth-line);
}

    .auth-btn-2:hover {
        border-color: #bdb5ae;
        color: var(--auth-ink-2);
    }

    .auth-btn:focus-visible,
    .auth-btn-2:focus-visible {
        outline: 2px solid var(--auth-brand);
        outline-offset: 2px;
    }

/* Sits in a row rather than filling the column. */
.auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

    .auth-actions .auth-btn,
    .auth-actions .auth-btn-2 {
        width: auto;
        margin-top: 0;
    }

/* ---------------------------------------------------------------- the links */

.auth-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}

.auth-link {
    display: inline-flex;
    align-items: center;
    /* 44px so the touch target clears the floor on a phone. */
    min-height: 44px;
    font-size: 14px;
    color: var(--auth-brand-deep);
    text-decoration: none;
}

    .auth-link:hover {
        color: var(--auth-brand-deep);
        text-decoration: underline;
    }

    .auth-link:focus-visible {
        outline: 2px solid var(--auth-brand);
        outline-offset: 2px;
        border-radius: 3px;
    }

.auth-links-dot {
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--auth-line-3);
}

/* ----------------------------------------------------------- the validation
   Bootstrap is not loaded here, so the classes MVC and jquery.validate.
   unobtrusive emit need their own rules. validation-summary-valid must be
   hidden or an empty box paints above the fields on a clean page load.        */

.validation-summary-valid,
.field-validation-valid {
    display: none;
}

.validation-summary-errors {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 20px;
    padding: 11px 13px;
    font-size: 13px;
    color: var(--auth-danger-ink);
    background: var(--auth-danger-bg);
    border: 1px solid var(--auth-danger-line);
    border-radius: var(--auth-radius);
}

    .validation-summary-errors::before {
        content: "";
        flex: none;
        width: 17px;
        height: 17px;
        margin-top: 1px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4491c' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5'/%3E%3Cpath d='M12 16.2h.01'/%3E%3C/svg%3E") no-repeat center center;
        background-size: contain;
    }

    .validation-summary-errors ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .validation-summary-errors li + li {
            margin-top: 4px;
        }

.field-validation-error {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--auth-danger-ink);
}

/* Specific selectors rather than !important: .auth-input:focus would otherwise
   out-rank a single error class and the border would go orange on focus. */
.auth-input.input-validation-error {
    border-color: var(--auth-danger);
}

    .auth-input.input-validation-error:focus {
        border-color: var(--auth-danger);
        box-shadow: 0 0 0 3px rgba(180, 73, 28, 0.16);
    }

/* Still emitted by a few shared partials. */
.text-danger {
    color: var(--auth-danger-ink);
}

/* --------------------------------------------------------- message pages */

.auth-prose {
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--auth-body);
}

    .auth-prose + .auth-prose {
        margin-top: 14px;
    }

.auth-prose-sm {
    margin: 20px 0 0;
    font-size: 13px;
    color: var(--auth-muted);
}

.auth-badge {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 50%;
}

    .auth-badge svg {
        width: 22px;
        height: 22px;
    }

.auth-badge-mail {
    color: var(--auth-brand-deep);
    background: var(--auth-danger-bg);
}

.auth-badge-ok {
    color: var(--auth-ok);
    background: var(--auth-ok-bg);
}

.auth-badge-warn {
    color: var(--auth-danger);
    background: var(--auth-danger-bg);
}

/* ------------------------------------------------- _PasswordRules.cshtml
   That partial is shared and its markup is not changed here, so these rules
   target the classes it already emits.                                       */

.password-rules {
    margin-top: 10px;
}

.password-rules-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--auth-muted);
}

.password-rules-list {
    display: grid;
    gap: 4px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

    .password-rules-list li {
        display: grid;
        grid-template-columns: 14px 1fr;
        gap: 7px;
        font-size: 12.5px;
        line-height: 1.4;
        color: var(--auth-muted);
    }

        .password-rules-list li::before {
            content: "";
            width: 5px;
            height: 5px;
            margin: 6px 0 0 4px;
            border-radius: 50%;
            background: var(--auth-line-3);
        }

/* ---------------------------------------------------------------- the foot */

.auth-foot {
    margin: 24px 0 0;
    font-size: 12px;
    text-align: center;
    color: var(--auth-muted-2);
}

/* -------------------------------------------------------------- responsive
   Under 900px the panel becomes a band above the form rather than a column
   beside it, so the mark is still the first thing on the page.               */

@media (max-width: 900px) {
    .auth-split {
        grid-template-columns: 1fr;
    }

    .auth-panel {
        order: -1;
        min-height: 168px;
        padding: 28px;
    }

    .auth-panel-wm {
        right: -120px;
        bottom: -150px;
        width: 380px;
        height: 380px;
    }

    .auth-panel-logo {
        width: 190px;
    }

    .auth-panel-tag {
        margin-top: 14px;
    }

    .auth-form {
        padding: 32px 24px 48px;
        place-items: start center;
    }
}

@media (max-width: 480px) {
    .auth-panel {
        min-height: 132px;
        padding: 22px;
    }

    .auth-panel-logo {
        width: 160px;
    }

    .auth-form {
        padding: 28px 20px 40px;
    }

    .auth-input {
        height: 48px;
    }

    .auth-btn,
    .auth-btn-2 {
        height: 50px;
    }

    .auth-actions .auth-btn,
    .auth-actions .auth-btn-2 {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-body *,
    .auth-body *::before,
    .auth-body *::after {
        transition: none !important;
        animation: none !important;
    }
}