/* Shared header and footer from 01Shared/Site.master. Loaded on every page, before the page's own styles.
   Rules use qq- classes and set their own font, colour and alignment, because older page styles set these on body. */
body { margin: 0; }

.qq-topbar {
    background: linear-gradient(135deg, #0a5bd6 0%, #07439f 100%);
    color: #fff;
    font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    text-align: left;
}
.qq-topbar .qq-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1100px;
    padding: 10px 16px;
}
.qq-topbar .qq-name { color: #fff; font-size: 17px; font-weight: 700; }
.qq-topbar .qq-co { color: #fff; margin-left: 8px; opacity: .85; }
.qq-topbar .qq-right { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.qq-topbar .qq-contact { color: #fff; font-size: 14px; opacity: .9; overflow-wrap: anywhere; }
.qq-topbar a.qq-home {
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 14px;
    text-decoration: none;
}
.qq-topbar a.qq-home:hover { background: rgba(255, 255, 255, .15); }

/* Demo site only: a slim strip above the header with the way back to the sales site. */
.qq-demobar {
    background: #f1f5fb;
    border-bottom: 1px solid #d7e0ee;
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    text-align: left;
}
.qq-demobar .qq-demobar-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 auto;
    max-width: 1100px;
    padding: 6px 16px;
}
.qq-demobar a.qq-demobar-logo { display: inline-flex; }
.qq-demobar img { height: 24px; width: auto; }
.qq-demobar img.qq-dl-dark { display: none; }
.qq-demobar .qq-demobar-text { color: #5b6b82; }
.qq-demobar .qq-demobar-classic { display: none; }
html.classic .qq-demobar .qq-demobar-classic { display: inline; }
.qq-demobar a.qq-demobar-back { color: #0a5bd6; font-weight: 600; margin-left: auto; text-decoration: none; }
.qq-demobar a.qq-demobar-back:hover { text-decoration: underline; }
html.dark .qq-demobar { background: #141c2b; border-bottom-color: #2a3650; }
html.dark .qq-demobar img.qq-dl-light { display: none; }
html.dark .qq-demobar img.qq-dl-dark { display: inline; }
html.dark .qq-demobar .qq-demobar-text { color: #9fb0c8; }
html.dark .qq-demobar a.qq-demobar-back { color: #7db2ff; }

/* A strip across the top (QQUserPage.NoticeBarHtml): the renewal reminder (amber, red once the paid year has ended)
   or Quick Qualifier support inside a customer's site (blue). The link on the right is the action. */
.qq-notice {
    align-items: center;
    border-bottom: 1px solid;
    display: flex;
    flex-wrap: wrap;
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    gap: 6px 16px;
    justify-content: center;
    padding: 9px 16px;
    text-align: left;
}
.qq-notice a { border: 1px solid currentColor; border-radius: 999px; color: inherit; font-weight: 700; padding: 3px 14px; text-decoration: none; white-space: nowrap; }
.qq-notice a:hover { background: rgba(0, 0, 0, .06); }
.qq-notice-soon { background: #fff3d6; border-color: #f0d38a; color: #6b4500; }
.qq-notice-grace { background: #fdecea; border-color: #f3b8b2; color: #8f1d14; }
.qq-notice-support { background: #e8f0fd; border-color: #b9cff5; color: #07439f; }
html.dark .qq-notice-soon { background: #3d3014; border-color: #6b5420; color: #f0c25e; }
html.dark .qq-notice-grace { background: #3b1f20; border-color: #6e3431; color: #ff9d94; }
html.dark .qq-notice-support { background: #1b2d4d; border-color: #2f4f86; color: #9cc0ff; }
html.dark .qq-notice a:hover { background: rgba(255, 255, 255, .08); }
@media print { .qq-notice { display: none; } }

.qq-foot {
    align-items: center;
    clear: both;
    color: #5b6b82;
    display: flex;
    font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    gap: 16px;
    justify-content: center;
    padding: 28px 16px;
}
.qq-foot img { height: 40px; width: auto; }
.qq-foot img.qq-logo { height: 30px; }
.qq-foot a.qq-logo-link { display: inline-flex; }   /* the logo links to the sales site */
.qq-foot .qq-eho { align-items: center; display: inline-flex; font-size: 12px; font-weight: 600; gap: 8px; letter-spacing: .03em; line-height: 1.2; text-transform: uppercase; }
.qq-foot .qq-eho svg { flex: none; }
html.dark .qq-foot .qq-eho { color: #b8c5d9; }
.qq-foot img.qq-logo-dark { display: none; }          /* the dark-page logo (light lettering), swapped in below */
html.dark .qq-foot img.qq-logo-light { display: none; }
html.dark .qq-foot img.qq-logo-dark { display: inline; }

/* Messages for the visitor (qqMsg in Site.master, from ClassMsg.MsgBox), in place of the browser's alert() box. A warning
   look (amber with a ! badge; red for errors, green with a tick when done) so it stands out from the page; its own colours, as not every page loads Calculator.css. */
#qqMsgs { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 1000; width: min(500px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; }
.qq-msg { display: flex; align-items: center; gap: 12px; padding: 14px 10px 14px 14px; background: #fff4d4; color: #3b2a00; border: 1px solid #ecc15a; border-left: 6px solid #d98e04; border-radius: 10px; box-shadow: 0 12px 32px rgba(60, 40, 0, .28), 0 2px 6px rgba(0, 0, 0, .12); font: 500 15.5px/1.45 "Segoe UI", system-ui, sans-serif; text-align: left; animation: qq-msg-in .22s cubic-bezier(.2, 1.4, .4, 1); }
.qq-msg-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #d98e04; color: #fff; font: 700 16px/1 "Segoe UI", system-ui, sans-serif; }
.qq-msg-text { flex: 1; }
.qq-msg-x { flex: none; align-self: flex-start; background: none; border: 0; color: inherit; opacity: .65; font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; border-radius: 6px; }
.qq-msg-x:hover, .qq-msg-x:focus-visible { opacity: 1; background: rgba(217, 142, 4, .18); }
html.dark .qq-msg { background: #3d2d08; color: #ffefc6; border-color: #8c6b1d; border-left-color: #f5b82e; box-shadow: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4); }
html.dark .qq-msg-icon { background: #f5b82e; color: #2a1e00; }
html.dark .qq-msg-x:hover, html.dark .qq-msg-x:focus-visible { background: rgba(245, 184, 46, .2); }
/* A question (qqAsk in Site.master) in place of the browser's confirm() box: the message with Yes / Cancel under it */
.qq-ask { align-items: flex-start; }
.qq-ask-btns { display: flex; gap: 8px; margin-top: 10px; }
.qq-ask-btns button { padding: 6px 16px; border-radius: 8px; font: 600 14.5px/1.3 "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.qq-ask-yes { background: #d98e04; color: #fff; border: 1px solid #d98e04; }
.qq-ask-yes:hover { background: #b87800; }
.qq-ask-no { background: transparent; color: inherit; border: 1px solid #c9a24a; }
/* A question asked where its button was (qqAskHere in Site.master): on its own line, with the yes button in red */
.qq-here { align-items: center; display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 6px 8px; font: 500 14.5px/1.35 "Segoe UI", system-ui, sans-serif; }
.qq-here-text { flex-basis: 100%; font-weight: 600; }
span.qq-here button.qq-here-yes, span.qq-here button.qq-here-no { border-radius: 8px; cursor: pointer; font: 600 14.5px/1.3 "Segoe UI", system-ui, sans-serif; min-height: 34px; padding: 6px 16px; }
span.qq-here button.qq-here-yes { background: #c4320a; border: 1px solid #c4320a; color: #fff; }
span.qq-here button.qq-here-yes:hover { background: #a3290a; border-color: #a3290a; }
span.qq-here button.qq-here-no { background: transparent; border: 1px solid #b9c2cf; color: inherit; }
span.qq-here button.qq-here-no:hover { border-color: #0a5bd6; }
html.dark span.qq-here button.qq-here-yes { background: #e0533a; border-color: #e0533a; }
html.dark span.qq-here button.qq-here-no { border-color: #4b5f7d; }
.qq-ask-no:hover { background: rgba(217, 142, 4, .14); }
.qq-ask-btns button:focus-visible { outline: 2px solid #1d5fbf; outline-offset: 2px; }
html.dark .qq-ask-yes { background: #f5b82e; color: #2a1e00; border-color: #f5b82e; }
html.dark .qq-ask-yes:hover { background: #ffcb52; }
html.dark .qq-ask-no { border-color: #8c6b1d; }
html.dark .qq-ask-btns button:focus-visible { outline-color: #8fb8ff; }
/* red: something not allowed or out of range */
.qq-msg-error { background: #fde8e8; color: #4a0e0e; border-color: #f0a3a3; border-left-color: #c62828; box-shadow: 0 12px 32px rgba(90, 10, 10, .28), 0 2px 6px rgba(0, 0, 0, .12); }
.qq-msg-error .qq-msg-icon { background: #c62828; color: #fff; }
.qq-msg-error .qq-msg-x:hover, .qq-msg-error .qq-msg-x:focus-visible { background: rgba(198, 40, 40, .14); }
html.dark .qq-msg-error { background: #461519; color: #ffe0e0; border-color: #93323a; border-left-color: #ff6b6b; box-shadow: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4); }
html.dark .qq-msg-error .qq-msg-icon { background: #ff6b6b; color: #2a0505; }
html.dark .qq-msg-error .qq-msg-x:hover, html.dark .qq-msg-error .qq-msg-x:focus-visible { background: rgba(255, 107, 107, .2); }
/* green: done (saved, sent, deleted) */
.qq-msg-ok { background: #e5f6ea; color: #0f3b1c; border-color: #9fd6ad; border-left-color: #1e8e3e; box-shadow: 0 12px 32px rgba(10, 60, 25, .25), 0 2px 6px rgba(0, 0, 0, .12); }
.qq-msg-ok .qq-msg-icon { background: #1e8e3e; color: #fff; }
.qq-msg-ok .qq-msg-x:hover, .qq-msg-ok .qq-msg-x:focus-visible { background: rgba(30, 142, 62, .14); }
html.dark .qq-msg-ok { background: #13361f; color: #dcf7e4; border-color: #2f7a47; border-left-color: #4cc777; box-shadow: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4); }
html.dark .qq-msg-ok .qq-msg-icon { background: #4cc777; color: #062010; }
html.dark .qq-msg-ok .qq-msg-x:hover, html.dark .qq-msg-ok .qq-msg-x:focus-visible { background: rgba(76, 199, 119, .2); }
@keyframes qq-msg-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qq-msg { animation: none; } }
/* an in-place update on its way */
html.qq-busy, html.qq-busy * { cursor: progress !important; }
/* a page being put back as it was after Back or reload (Site.master): hidden for the moment it takes */
html.qq-restoring #qqForm { visibility: hidden; }

/* The slim top bar (web.config NewTopBar): Home, the page with a calculator menu, Prepared for, the look switch and the
   loan officer's menu. Its menus are <details>; Site.master closes them on a click outside or Escape. */
.qq-bar .qq-bar-inner { align-items: center; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 auto; max-width: 1240px; padding: 6px 16px; }
.qq-bar .qq-bar-logo { color: var(--topbar, #07439f); display: inline-flex; flex: none; line-height: 0; text-decoration: none; }   /* the Q check mark (favicon.svg) on the bar; the check's outline takes the bar color */
.qq-bar .qq-bar-logo svg { display: block; }
.qq-bar details { position: relative; }
.qq-bar summary { color: #fff; cursor: pointer; list-style: none; white-space: nowrap; }
.qq-bar summary::-webkit-details-marker { display: none; }
.qq-bar summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.qq-bar .qq-bar-calc > summary { align-items: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; display: flex; font-size: 17px; font-weight: 700; gap: 8px; padding: 2px 8px 2px 12px; }   /* outlined, so the page name reads as a menu */
.qq-bar .qq-bar-calc > summary:hover, .qq-bar .qq-bar-calc[open] > summary { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .7); }
.qq-bar .qq-bar-calc .qq-bar-caret { font-size: 13px; opacity: 1; }
.qq-bar .qq-bar-caret { font-size: 12px; opacity: .9; }
.qq-bar .qq-bar-menu { background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); color: #1f2937; left: 0; padding: 10px 14px; position: absolute; top: calc(100% + 6px); z-index: 50; }
.qq-bar .qq-bar-calcs { display: grid; gap: 2px 20px; grid-auto-flow: column; grid-template-rows: repeat(5, auto); }
.qq-bar .qq-bar-grp { border-bottom: 2px solid #1f3c6b; color: #1f3c6b; font-size: 12px; font-weight: 800; letter-spacing: .06em; margin-bottom: 4px; padding-bottom: 3px; text-transform: uppercase; }
.qq-bar .qq-bar-menu a { color: #1f3c6b; display: block; font-size: 14px; padding: 3px 0; text-decoration: none; white-space: nowrap; }
.qq-bar .qq-bar-menu a:hover { text-decoration: underline; }
.qq-bar .qq-bar-menu-r { left: auto; min-width: 200px; right: 0; }
.qq-bar .qq-bar-who { border-bottom: 1px solid #e5e7eb; font-weight: 700; margin-bottom: 6px; padding-bottom: 6px; }
.qq-bar .qq-bar-who small { color: #6b7280; display: block; font-weight: 400; }
.qq-bar .qq-bar-prep { align-items: center; color: #fff; display: flex; font-size: 13px; gap: 8px; }
.qq-bar .qq-bar-prep[hidden] { display: none; }
.qq-bar .qq-bar-prep input { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .4); border-radius: 6px; color: #fff; font: inherit; font-size: 14px; padding: 4px 8px; width: 220px; }
.qq-bar .qq-bar-prep input::placeholder { color: rgba(255, 255, 255, .6); }
.qq-bar .qq-bar-right { align-items: center; display: flex; gap: 10px; margin-left: auto; }
.qq-bar .qq-bar-user > summary { align-items: center; display: flex; font-size: 14px; gap: 6px; }
/* Round buttons in the bar: "?" for a page's tour and light/dark, one size and outline */
.qq-bar .qq-bar-round, .qq-bar .look-toggle .look-dark {
    align-items: center; background: transparent; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; box-sizing: border-box; color: #fff;
    cursor: pointer; display: inline-flex; font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; height: 30px; justify-content: center; margin: 0; padding: 0; width: 30px;
}
.qq-bar .qq-bar-round:hover, .qq-bar .qq-bar-round:focus-visible { background: rgba(255, 255, 255, .15); border-color: #fff; outline: none; }
.qq-bar .qq-bar-round[hidden] { display: none; }
/* The Help menu ("?", Site.master): Show me how (the page's tour button, moved in), Help topics, Email support */
.qq-bar .qq-bar-help[hidden] { display: none; }
.qq-bar .qq-bar-help[open] > summary { background: rgba(255, 255, 255, .15); border-color: #fff; }
.qq-bar .qq-bar-help .qq-bar-menu small { color: #6b7280; display: block; font-size: 12px; }
.qq-bar .qq-help-tour { background: none; border: 0; color: #1f3c6b; cursor: pointer; display: block; font: inherit; font-size: 14px; padding: 3px 0; text-align: left; }
.qq-bar .qq-help-tour:hover { text-decoration: underline; }
.qq-bar .qq-help-tour[hidden] { display: none; }
html.dark .qq-bar .qq-help-tour { color: #cfe0ff; }
html.dark .qq-bar .qq-bar-help .qq-bar-menu small { color: #9fb2cf; }
.qq-bar .look-toggle .look-dark { margin-right: 6px; }
.qq-bar img.qq-bar-av { object-fit: cover; object-position: 50% 12%; }   /* my photo in place of my initials (home page) */
.qq-bar .qq-bar-av { background: rgba(255, 255, 255, .2); border-radius: 50%; display: inline-grid; font-size: 11px; font-weight: 700; height: 24px; place-items: center; width: 24px; }
html.dark .qq-bar .qq-bar-menu { background: #1b2a44; color: #dbe6f7; }
html.dark .qq-bar .qq-bar-menu a { color: #cfe0ff; }
html.dark .qq-bar .qq-bar-who { border-color: #33476a; }
html.dark .qq-bar .qq-bar-grp { border-color: #6f9be0; color: #fff; }
html.dark .qq-bar .qq-bar-who small { color: #9fb2cf; }
@media (max-width: 600px) {
    .qq-bar .qq-bar-prep { order: 5; width: 100%; }
    .qq-bar .qq-bar-prep input { flex: 1; min-width: 0; width: auto; }
    .qq-bar .qq-bar-calcs { grid-auto-flow: row; grid-template-rows: none; }
    .qq-bar .qq-bar-calcs > span { display: none; }
}
/* What the bar takes over from a calculator's heading card (Site.master's script moves the pieces). */
html.qq-newbar #Header .head-title, html.qq-newbar #Header .prepared { display: none; }
html.qq-newbar #Header.qq-fitted, html.qq-newbar .calc-page:not(:has(.head-buttons)) #Header { display: none; }
html.qq-newbar #Header.qq-slim .head-row { margin-top: 0; }
.qq-bar-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.qq-bar-pick select { flex: 1 1 140px; min-width: 0; }
.qq-pdf-title { grid-column: 1 / -1; }
html .qq-pdf-title input.head-title, html:not(.classic) .compact .qq-pdf-title .head-title, html:not(.classic) .fresh .qq-pdf-title .head-title { font-size: inherit !important; font-weight: 400 !important; min-height: 0 !important; text-align: left; width: 100%; }