/* SEC notice acknowledgment - login page.
 *
 * Kept in its own stylesheet, referenced with a RELATIVE path from login.aspx,
 * so it loads from whichever environment is serving the page.
 *
 * login.aspx references child.css/basinheader.css with absolute
 * https://basinmembers.com URLs, which means test.basinmembers.com loads
 * PRODUCTION styles. Putting these rules in child.css would therefore have no
 * effect on the test site until production was updated.
 *
 * This file must be loaded AFTER child.css. Several rules below deliberately
 * override child.css globals, most importantly:
 *     body, input, select, textarea { height: 70px }
 * which otherwise renders the acknowledgment checkbox as a 70px square.
 */

/* Positioning context for the notice overlay. */
#Image {
    position: relative;
}

/* ---- Notice overlay, on the background image in the left-hand panel ---- */
/* Anchored below the Basin Electric logo baked into the top of the artwork.
   Height is bounded by the viewport so the whole notice stays on screen
   without page scrolling; longer text scrolls inside the box. */
#sec-notice {
    position: absolute;
    left: 5%;
    right: 6%;
    top: 285px;
    max-height: 420px;
    max-height: calc(100vh - 330px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 1.1em 1.4em;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: rgba(0, 43, 61, 0.78);
    color: #fff;
    text-align: left;
    z-index: 2;
}
#sec-notice-heading {
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.6em 0;
    padding: 0;
    line-height: 1.3;
}
#sec-notice-body {
    font-size: 13px;
    line-height: 1.5;
    height: auto;
}
#sec-notice-body p {
    margin: 0 0 0.85em 0;
    padding: 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
}
#sec-notice-body p:last-child {
    margin-bottom: 0;
}
#sec-notice:focus,
#sec-notice-body:focus {
    outline: 2px solid #009FDF;
    outline-offset: 2px;
}

/* Narrow screens: basinheader.css hides #Image below 1128px. Keep the
   notice container visible, hide only the decorative image, and let the
   notice use normal page flow above the login panel. */
@media screen and (max-width: 1128px) {
    #Image {
        display: block;
        float: none;
        width: 100%;
    }
    #Image .image.fit {
        display: none;
    }
    #side-login {
        float: none;
        width: 100%;
    }
    #sec-notice {
        position: static;
        top: auto;
        max-height: none;
        margin: 1em 5%;
        width: auto;
    }
}

/* ---- Acknowledgment checkbox, with the credentials form ---- */
/* Matches the 80% width of the email/password inputs and the login button so
   the row aligns flush with their left and right edges. */
#sec-ack-box {
    width: 80%;
    margin: 0 auto 1em auto;
    text-align: left;
    box-sizing: border-box;
}
/* asp:CheckBox renders <span><input/><label/></span>. Lay it out as a flex row
   so the box stays aligned with the first line of a wrapping label. */
#sec-ack-box .sec-ack-checkbox,
#sec-ack-box > span {
    display: flex;
    align-items: flex-start;
}
/* Overrides child.css "input, select" (width/padding) and
   "body, input, select, textarea" (height: 70px). */
#sec-ack-box input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    height: 16px;
    width: 16px;
    min-height: 0;
    min-width: 0;
    max-width: 16px;
    padding: 0;
    margin: 2px 8px 0 0;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;
    vertical-align: top;
}
#sec-ack-box label {
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    height: auto;
}
#sec-ack-box .sec-ack-error {
    color: #D22630;
    font-weight: bold;
    font-size: 13px;
    line-height: 1.4;
    margin: 0.5em 0 0 0;
    height: auto;
}

/* ---- Login button, gated on the acknowledgment checkbox ---- */
#side-login .button.alt[disabled],
#side-login .button.alt[disabled]:hover,
#side-login .button.alt:disabled,
#side-login .button.alt:disabled:hover {
    background-color: #9aa5ab;
    background: #9aa5ab;
    cursor: not-allowed;
}