/* SKYOPS login portal - shared shell for login, forgotPassword, resetPassword
   and redirect.

   Design rule for every page that links this file: NOTHING MOVES. Not a CSS
   animation, not a transition, not a jQuery fade, not an animated GIF. A
   published desktop re-encodes and ships every screen region that changes, so
   anything repainting continuously costs bandwidth for the whole session, not
   just the page it is on. Flat fills and crisp edges compress to almost
   nothing, which is why the layout is two solid blocks and high-contrast text.

   The single exception is the watermark easter egg at the bottom of this file,
   which is scoped to one element and only ever runs on a deliberate hover.

   Palette measured, not guessed:
     #030304  the logo SVG's own circle fill, so the badge has no visible edge
     #FF6600  skyops.com's accent, and the logo's own hue (25.2 vs 24.0 deg;
              the old #FF8A00 was 32.5 and was the outlier) */

*, *::before, *::after {
    transition: none !important;
    animation: none !important;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #ffffff;
    color: #1f2124;
}

/* ---------- shell: brand block left, form right ---------- */

.sk-shell {
    display: flex;
    min-height: 100vh;
}

.sk-brand {
    flex: 0 0 280px;
    background: #030304;
    color: #ffffff;
    padding: 40px 32px 30px 32px;
    display: flex;
    flex-direction: column;
}

.sk-main {
    flex: 1 1 auto;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 24px;
    position: relative;
}

.sk-form {
    width: 100%;
    max-width: 430px;
    position: relative;
    z-index: 1;
}

/* forgotPassword and resetPassword carry guidance lists as well as fields, so
   they get a wider column. */
.sk-form-wide {
    max-width: 560px;
}

/* Past roughly laptop width the 280px panel is under a quarter of the screen
   and stops reading as half the layout - it becomes a sidebar, and the form
   should centre on the viewport rather than on the white half beside it.

   Because the panel is a fixed 280px the two centres are always exactly 160px
   apart, and a right margin of the full panel width shifts a centred flex item
   by half of it. One declaration, correct at 1367px and at 2560px alike. */
@media (min-width: 1367px) {
    .sk-form {
        margin-right: 280px;
    }
}

/* ---------- brand block ---------- */

/* The vector's outer circle is cx/cy 504.7 r 504.7 in a 1009.4 viewBox, so it
   fills the box exactly and needs no correction to sit on the text column. The
   1024px PNG it replaced carried 53px of dead background a side and needed
   three separate negative margins. */
.sk-mark {
    width: 200px;
    height: 200px;
    max-width: 100%;
    display: block;
}

/* SKYOPS.COM is one unbreakable word, so if it does not fit the column it
   spills out of the panel rather than wrapping. Calibri is unusually narrow -
   235px at 44px - but it is absent on macOS and iPadOS where the fallback
   measures 296px. 36px keeps the worst case inside a 280px panel with 14px to
   spare. Raise this only if the panel gets wider. */
.sk-wordmark {
    font-family: Calibri, Verdana, sans-serif;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: .5px;
    margin: 18px 0 0 0;
}

    .sk-wordmark .sk-sky {
        color: #FF6600;
    }

    .sk-wordmark .sk-ops {
        color: #ffffff;
    }

.sk-strap {
    color: #b9bcc0;
    font-size: 15px;
    line-height: 1.5;
    margin-top: 16px;
    max-width: 34ch;
}

/* skyops.com's own three pillars, in the one colour the site reserves for them
   - on the marketing site orange appears five times and only ever as text. */
.sk-pillars {
    margin-top: 16px;
    font-size: 19px;
    font-weight: 600;
    color: #FF6600;
}

    .sk-pillars span {
        margin-right: 14px;
    }

.sk-brand-foot {
    margin-top: auto;
    padding-top: 24px;
    color: #7d8186;
    font-size: 12px;
}

    .sk-brand-foot .sk-rule {
        border-top: 1px solid #232427;
        margin-bottom: 12px;
    }

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

/* Back to sign in, sitting above the heading rather than at the foot of the
   brand panel where it used to be. Two reasons it moved: .sk-brand-foot is
   display:none below 992px, so on a phone there was no way back at all, and
   even on a desktop it sat at the very bottom of the dark column, as far from
   the form it belongs to as the layout allows. */
.sk-back {
    display: inline-block;
    margin: 0 0 14px 0;
    color: #a83f00; /* the accent darkened to 6.2:1 on white, same as .sk-link */
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

    .sk-back:hover, .sk-back:focus {
        color: #16181b;
        text-decoration: underline;
    }

.sk-title {
    font-size: 30px;
    font-weight: 700;
    color: #16181b;
    margin: 0 0 4px 0;
}

.sk-sub {
    color: #5d6167;
    font-size: 14px;
    margin: 0 0 20px 0;
}

.sk-form .form-group {
    margin-bottom: 18px;
}

.sk-form label {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #4a4e54;
    margin-bottom: 6px;
    display: block;
}

.sk-form .form-control {
    height: 48px;
    font-size: 16px; /* 16px stops iOS zooming the page on focus */
    border: 1px solid #c9ccd1;
    border-radius: 0;
    color: #16181b;
    background: #ffffff;
    box-shadow: none;
}

    /* A solid ring rather than a soft glow: it survives lossy screen encoding
       and it is one flat rectangle to redraw. */
    .sk-form .form-control:focus {
        border-color: #FF6600;
        outline: 2px solid #FF6600;
        outline-offset: -2px;
        box-shadow: none;
    }

.sk-form .input-group-text {
    border-radius: 0;
    border: 1px solid #c9ccd1;
    border-right: none;
    background: #f4f5f6;
    color: #6b7076;
    width: 46px;
    justify-content: center;
}

/* Sits inside an input-group beside a 48px field, so it matches the field
   rather than the 50px form buttons. Needs .sk-form in the selector to outrank
   the .sk-form .btn height above. */
.sk-form .btn.sk-reveal {
    border: 1px solid #c9ccd1;
    border-left: none;
    background: #f4f5f6;
    color: #4a4e54;
    width: 48px;
    height: 48px;
    border-radius: 0;
}

    .sk-form .btn.sk-reveal:hover, .sk-form .btn.sk-reveal:focus {
        background: #e8eaec;
        color: #16181b;
    }

/* Orange is the brand accent and the brightest thing on a white page; the text
   on it is near-black because white on #FF6600 is only 2.9:1 and fails once a
   session compresses. Near-black on it is 5.9:1. */
.sk-form .btn {
    border-radius: 0;
    font-weight: 700;
    letter-spacing: .3px;
    height: 50px;
    /* Cosmo's .btn-lg is padding: 18px 30px. With box-sizing: border-box and a
       fixed height that leaves a 14px content box, and the label sinks to the
       bottom of the button instead of centring. Override the padding rather
       than drop the height, so every button on the page is still exactly 50px. */
    padding: 0 20px;
    line-height: 1.2;
}

.sk-btn-primary {
    background: #FF6600;
    border: 1px solid #FF6600;
    color: #1a1a1a;
}

    .sk-btn-primary:hover, .sk-btn-primary:focus, .sk-btn-primary:active {
        background: #e65c00;
        border-color: #e65c00;
        color: #1a1a1a;
    }

    .sk-btn-primary:focus-visible {
        outline: 3px solid #16181b;
        outline-offset: 2px;
    }

.sk-btn-ghost {
    background: #ffffff;
    border: 2px solid #16181b;
    color: #16181b;
}

    .sk-btn-ghost:hover, .sk-btn-ghost:focus {
        background: #16181b;
        color: #ffffff;
    }

.sk-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.sk-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #FF6600; /* one line, no appearance hacks, and it shows a tick */
    vertical-align: -3px;
    margin-right: 8px;
    cursor: pointer;
}

.sk-remember label {
    display: inline;
    text-transform: none;
    font-size: 14px;
    font-weight: 600;
    color: #3a3e44;
    cursor: pointer;
}

.sk-link {
    color: #a83f00; /* the accent darkened to 6.2:1 on white; #FF6600 is 3.0:1 */
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

    .sk-link:hover, .sk-link:focus {
        color: #16181b;
        text-decoration: underline;
    }

.sk-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    color: #85898f;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

    .sk-or::before, .sk-or::after {
        content: "";
        flex: 1 1 auto;
        border-top: 1px solid #dfe1e4;
    }

.sk-hint {
    font-size: 13px;
    color: #8a3d00;
    background: #fff3ea;
    border-left: 3px solid #FF6600;
    padding: 8px 10px;
    margin-top: 8px;
}

/* The password strength message, which the AjaxControlToolkit extender writes
   into whatever label its HelpStatusLabelID names. It used to carry
   .alert-info, and bootstrap5-compat.css fills that solid Cosmo purple, so an
   empty label rendered as a purple block under the field before anyone had
   typed a character. It borrows the Caps Lock hint's look instead, since it is
   the same kind of message, and it keeps out of the way whenever it has
   nothing to say: the extender writes plain text and clears it back to an
   empty string the moment the password satisfies every rule, so :empty covers
   page load and success alike. */
.sk-pwstrength {
    display: block;
}

    .sk-pwstrength:empty {
        display: none;
    }

/* Guidance bullets on the password pages. */
.sk-guidance {
    margin: 0 0 20px 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.65;
    color: #5d6167;
}

    .sk-guidance li {
        margin-bottom: 3px;
    }

.alertpadding {
    padding: 10px 12px;
    font-size: 14px;
}

.sk-form .alert {
    border-radius: 0;
    font-size: 14px;
}

/* Validators render inline; give them room and a matching square look. */
.sk-form .alert-danger {
    display: block;
    padding: 8px 10px;
    margin-top: 6px;
    font-size: 13px;
}

.sk-form .alert-success ul,
.sk-form .alert-danger ul {
    margin: 8px 0 0 0;
    padding-left: 18px;
}

/* ---------- consent notice ---------- */

.sk-terms {
    margin-top: 20px;
    border: 1px solid #e3e5e8;
    background: #fafafa;
}

.sk-terms-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #4a4e54;
    padding: 9px 14px;
    border-bottom: 1px solid #e3e5e8;
    background: #f2f3f4;
}

.sk-terms-body {
    max-height: 70px;
    overflow-y: auto;
    padding: 12px 14px;
    font-size: 11.5px;
    line-height: 1.55;
    color: #5b5f65;
    text-align: justify;
}

.sk-status {
    margin-top: 12px;
    font-size: 12px;
    color: #6f7379;
}

    .sk-status a {
        color: #a83f00;
        font-weight: 600;
        text-decoration: none;
    }

        .sk-status a:hover, .sk-status a:focus {
            color: #16181b;
            text-decoration: underline;
        }

/* ---------- cookie warning ---------- */

#msg {
    background: #d1002a;
    color: #ffffff;
    padding: 10px 16px;
    width: 100%;
    display: none;
    position: absolute;
    z-index: 9999;
    font-size: 14px;
}

/* Kept from the original pages so the modal backdrop is unchanged. */
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: silver;
}

    .modal-backdrop.in,
    .modal-backdrop.show {
        filter: alpha(opacity=80);
        opacity: .8;
    }

/* ---------- watermark ---------- */

/* Just the owl's eyes, cropped out of the master badge into their own file.
   No filter and no blend mode, just opacity: one static layer painted once,
   which is the cheapest thing to put on a published desktop. The 92% term
   keeps it inside the white column so it can never bleed onto the brand panel
   or push the page wider than the viewport. */
/* Anchored to .sk-form, not to .sk-main. Against the column it drifted away
   from the form on any page whose content is taller than the viewport - 40% of
   a tall column is nowhere near 40% of the form - so forgotPassword and
   resetPassword had the eyes floating well above their fields. Inside the form
   the offset means the same thing at every content height.

   60vw rather than 92% because it now escapes the form's own box: at the
   tightest width the form centre is 360px from the white column's left edge,
   so a fixed 720px would bleed onto the brand panel around 1024 and again just
   above the 1367 breakpoint. The vw term keeps it clear at every width. */
.sk-watermark {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 60vw);
    height: auto;
    z-index: -1;
    /* Hoverable for the easter egg. It sits under .sk-form (z-index 1), so
       only the ~145px of eye either side of the form can be pointed at, which
       is what makes it an easter egg rather than something you trip over. */
    pointer-events: auto;
    opacity: .015;
    /* The single deliberate exception to the no-motion rule at the top of this
       file, which is why it needs !important to get past it. Declared here
       rather than on the hover rule so it eases out as well as in. A declared
       transition that never fires costs nothing, and this one only fires after
       a deliberate hover. */
    transition: opacity 1.2s ease !important;
}

/* The easter egg. This was a setTimeout on login.aspx and on no other page, so
   the eyes were inert everywhere else the watermark appears. As a transition
   delay it belongs to the stylesheet instead, which means every page that links
   this file has it, with no per-page copy to keep in step and no new script to
   register in a project file.

   The delay is on the hover rule only, so it governs arriving and not leaving:
   move away before the 1.8s is up and nothing ever started, and once lit the
   eyes fade back immediately. */
.sk-watermark:hover {
    opacity: .1;
    /* !important for the same reason the transition above needs it. This 1.8s
       and that 1.2s fade are one number between them: the eyes reach full
       brightness three seconds into the hover. Change one, change the other. */
    transition-delay: 1.8s !important;
}

/* The one moving thing on these pages should still honour the preference. The
   opacity change still happens, it just arrives at once - and because there is
   no fade to add to it, the wait carries the whole three seconds on its own. */
@media (prefers-reduced-motion: reduce) {
    .sk-watermark {
        transition-duration: 0s !important;
    }

    .sk-watermark:hover {
        transition-delay: 3s !important;
    }
}

/* ---------- stacked layout ---------- */

@media (max-width: 991.98px) {
    .sk-shell {
        flex-direction: column;
        min-height: 100vh;
    }

    .sk-brand {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 16px 20px;
    }

    .sk-mark {
        width: 54px;
        height: 54px;
    }

    .sk-wordmark {
        font-size: 28px;
        margin: 0;
    }

    .sk-strap, .sk-pillars, .sk-brand-foot {
        display: none;
    }

    /* Once the brand block is a header rather than a column there is no left
       edge to sit against, so the form goes back to centred. */
    .sk-main {
        padding: 28px 20px 40px 20px;
        align-items: flex-start;
        justify-content: center;
    }

    /* Auto margins centre the form in whatever space is left over and collapse
       to zero when there is none, so a short viewport scrolls from the top
       instead of clipping the heading, which is what align-items: center does
       on an overflowing flex container. */
    .sk-form {
        margin: auto;
    }

    .sk-title {
        font-size: 26px;
    }
}

/* Phone in landscape: the header bar was taking a fifth of the screen. */
@media (max-width: 991.98px) and (max-height: 480px) {
    .sk-brand {
        padding: 10px 20px;
        gap: 12px;
    }

    .sk-mark {
        width: 40px;
        height: 40px;
    }

    .sk-wordmark {
        font-size: 22px;
    }

    .sk-main {
        padding: 20px 18px 30px 18px;
    }
}