/* ==========================================================================
   The Source frame (slice 2).
   Base, header and footer rules copied from the Claude Design bundle
   (ClaudeDesignFiles\extracted\design-full-reference.css), unchanged.
   Colour tokens, .hm2-wrap, .hm2-btn and .hm2-eyebrow are not repeated
   here; they live in css/TheSourceTheme.css, which master/Retail.master
   links ahead of this file.
   ========================================================================== */

/* Base */
*{box-sizing:border-box}
/* Bootstrap sets html{font-size:10px}. The design sizes the frame in rem,
   which resolves against html, so without this the header and footer render
   at 62.5% of their intended size on any page whose own stylesheet does not
   set a root size. Retail.css and Product.css already force 16px per page;
   this makes every page carrying this frame agree. */
html{font-size:16px}
/* Angular Material's scripts inject a stylesheet at runtime that sets
   html{background:rgb(250,250,250)}. The old html,body height:100% rule below
   means body's cream only paints the first viewport, so anything scrolled past
   that showed the injected off-white instead. :root is the same element as html
   but scores as a class, so it beats the injected element selector without
   needing !important. */
:root{background:var(--cream)}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--slate);background:var(--cream);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}a:hover{color:var(--accent-hover)}
h1,h2,h3,h4,h5{color:var(--primary)}
.wrap{max-width:1680px;margin:0 auto;padding:0 44px}

/* Header */
.site-head{background:var(--cream,#F4F1EB);border-bottom:1px solid #E0DBCF}
.head-in{display:flex;align-items:center;height:71px;gap:2rem}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.site-head nav{margin-left:auto;display:flex;align-items:center;gap:2.6rem}
.site-head nav a{color:var(--primary);text-decoration:none;font-size:15px;font-weight:600}
.site-head nav a:hover{color:var(--accent)}
.site-head nav a.login{color:var(--accent)}
.search{background:#fff;border:1px solid #E0DBCF;border-radius:3px;display:flex;align-items:center;padding:5px 9px;gap:8px}
.search input{border:none;outline:none;font:inherit;font-size:13px;width:150px;color:var(--primary)}
.search svg{flex-shrink:0;color:var(--primary)}

/* Footer */
.hm2-foot{background:var(--primary);color:#fff;padding:4rem 5% 0;font-size:14px}
.hm2-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:3rem;align-items:start;padding-bottom:3rem}
.hm2-foot h4{font-size:0.72rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem}
.hm2-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.55rem}
.hm2-foot a{color:rgba(255,255,255,0.75);text-decoration:none;font-size:0.875rem}
.hm2-foot a:hover{color:#fff}
.hm2-foot-blurb{font-size:0.875rem;color:rgba(255,255,255,0.6);line-height:1.65;margin:1.1rem 0 0;max-width:280px}
.hm2-foot-tel{display:block;font-weight:700;font-size:1.05rem!important;color:#fff!important;margin-bottom:0.3rem}
.hm2-foot-mail{color:rgba(255,255,255,0.75)}
.hm2-foot .hm2-btn{font-size:13.5px;padding:0.6rem 1.2rem;display:inline-flex}
.hm2-foot-bar{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;border-top:1px solid rgba(244,241,235,0.12);padding:1.4rem 0 2rem;font-size:0.78rem;color:rgba(255,255,255,0.45)}
.hm2-foot-links{display:flex;gap:1.5rem}
.hm2-foot-links a{font-size:0.78rem;color:rgba(255,255,255,0.45)}
.hm2-social{display:flex;gap:0.7rem;margin-top:1.3rem}
.hm2-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(244,241,235,0.25);border-radius:3px;color:rgba(255,255,255,0.75);transition:border-color .15s,color .15s}
.hm2-social a:hover{border-color:var(--accent);color:var(--accent)}

/* Responsive: the pieces of the design's 1024px and 720px queries that touch the frame */
@media (max-width:1024px){.hm2-foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .hm2-foot-grid{grid-template-columns:1fr}

  /* Phone-width header. This block deliberately departs from the design
     bundle's 720px handling, approved by Anton on 31 August 2026: the
     bundle's values leave the logo, the nav links and the search crowded
     together on a phone. The header wraps to three rows, with room between
     them, wider spacing between the links as tap targets, and a search box
     that spans the header, inset from both side edges. Desktop width is
     untouched.

     The side padding is restated here deliberately. .head-in shares its
     element with .wrap, so this shorthand overrides .wrap's 0 44px and
     would otherwise leave the header flush against the screen edge, which
     is what the bundle's own padding:12px 0 does. The search box inherits
     the same inset, being full width inside this padded box. */
  .head-in{flex-wrap:wrap;height:auto;padding:20px 24px;gap:1.5rem}
  .site-head nav{flex-wrap:wrap;gap:1.4rem 2rem}
  .search{width:100%}
  .search input{flex:1;width:auto;min-width:0}
}

.center {
    margin: 0 auto;
    float: none;
    
}

.h1 {
    margin: 0;
}

/* Header search results box (session 16 fix up). Bootstrap's dropdown menu
   hung from the top left of #divSearchResult, an empty element inside the
   search field at the right edge of the header, and the old 400px width
   rule sent it off the page. It now hangs from the search field's right
   edge, is never wider than the screen less a margin, scrolls inside
   itself, and takes the site's palette and type. Every rule is scoped to
   #divSearchResult so no other dropdown changes. */
.search { position: relative; }
#divSearchResult { position: static; z-index: 9999; }
#divSearchResult .dropdown-menu {
    position: absolute; top: calc(100% + 10px); right: 0; left: auto;
    width: 420px; max-width: calc(100vw - 32px); max-height: 70vh; overflow: auto;
    margin: 0; padding: 0; background: #fff; border: 1px solid var(--border);
    border-radius: 6px; box-shadow: 0 14px 36px rgba(21,41,75,.16);
    font-family: inherit; font-size: 14px; text-align: left; z-index: 9999;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
#divSearchResult .dropdown-menu::-webkit-scrollbar { width: 8px; }
#divSearchResult .dropdown-menu::-webkit-scrollbar-track { background: transparent; }
#divSearchResult .dropdown-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid #fff; }
#divSearchResult .dropdown-menu::-webkit-scrollbar-thumb:hover { background: var(--slate); }
#divSearchResult .dropdown-menu > strong {
    position: sticky; top: 0; z-index: 1; display: block; padding: 11px 44px 11px 16px !important;
    background: var(--cream); border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate);
}
#divSearchResult .text-danger { color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 13px; }
#divSearchResult .btnPopoverClose {
    position: absolute; top: 6px; right: 8px; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    font-size: 20px; line-height: 1; color: var(--slate); cursor: pointer;
    opacity: 1; float: none; padding: 0; text-shadow: none;
}
#divSearchResult .btnPopoverClose:hover { background: var(--border); color: var(--primary); }
#divSearchResult ul { list-style: none; margin: 0; padding: 0; }
#divSearchResult .dropdown-menu > div { border-bottom: 1px solid var(--border); }
#divSearchResult .dropdown-menu > div:last-child { border-bottom: 0; }
#divSearchResult li > strong { display: block; padding: 10px 16px 2px; font-size: 14px; font-weight: 600; color: var(--primary); }
#divSearchResult li li { padding: 0; }
#divSearchResult li li a {
    display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 28px;
    font-size: 12px; font-weight: 500; letter-spacing: .03em; color: var(--slate); text-decoration: none;
}
#divSearchResult li li a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; opacity: .7; }
#divSearchResult li li a:hover { background: var(--cream); color: var(--accent); text-decoration: none; }
#divSearchResult li:last-child li:last-child a { margin-bottom: 6px; }
@media (max-width: 720px) {
    #divSearchResult .dropdown-menu { width: 100%; }
}

html, body {
    height: 100%;
}

.page-wrap {
    min-height: 100%;
    margin-bottom: -20px; /* Height of the footer */
}

    .page-wrap:after {
        content: "";
        display: block;
    }

    .page-footer, .page-wrap:after {
        height: 20px;
    }

    /**** General Modal Styles ***/
    .modal-header {
        min-height: 16.42857143px;
        padding: 15px;
        border-bottom: 0px;
    }

    .modal-footer {
        padding: 15px;
        text-align: right;
        border-top: 0px;
    }

    .register-modal-content {
        padding-top: 20px;
    }

    /*** Enviro Modal Styles ***/
    .enviro-presentation {
        height: 900px;
    }

    /*** Registration Modal Styles ***/
    .funkyradio div {
        clear: both;
        overflow: hidden;
    }

    .funkyradio label {
        width: 100%; /*Make sure the label goes to the end of the col*/
        border-radius: 3px;
        border: 1px solid #D1D3D4;
        font-weight: normal;
        padding-left: 60px;
        display: inline-flex;
    }

    .funkyradio input[type="radio"]:empty,
    .funkyradio input[type="checkbox"]:empty {
        display: none;
    }

        .funkyradio input[type="radio"]:empty ~ label,
        .funkyradio input[type="checkbox"]:empty ~ label {
            position: relative;
            line-height: 2.5em;
            text-indent: 3.25em;
            margin-top: 2em;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            .funkyradio input[type="radio"]:empty ~ label:before,
            .funkyradio input[type="checkbox"]:empty ~ label:before {
                position: absolute;
                display: block;
                top: 0;
                bottom: 0;
                left: 0;
                content: '';
                width: 2.5em;
                background: #D1D3D4;
                border-radius: 3px 0 0 3px;
            }

    .funkyradio input[type="radio"]:hover:not(:checked) ~ label,
    .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
        color: #888;
    }

        .funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
        .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
            content: '\2714';
            text-indent: .9em;
            color: #C2C2C2;
        }

    .funkyradio input[type="radio"]:checked ~ label,
    .funkyradio input[type="checkbox"]:checked ~ label {
        color: #777;
    }

        .funkyradio input[type="radio"]:checked ~ label:before,
        .funkyradio input[type="checkbox"]:checked ~ label:before {
            content: '\2714';
            text-indent: .9em;
            color: #333;
            background-color: #ccc;
        }

    .funkyradio input[type="radio"]:focus ~ label:before,
    .funkyradio input[type="checkbox"]:focus ~ label:before {
        box-shadow: 0 0 0 3px #999;
    }

    .funkyradio-default input[type="radio"]:checked ~ label:before,
    .funkyradio-default input[type="checkbox"]:checked ~ label:before {
        color: #333;
        background-color: #ccc;
    }

    .funkyradio-primary input[type="radio"]:checked ~ label:before,
    .funkyradio-primary input[type="checkbox"]:checked ~ label:before {
        color: #fff;
        background-color: #337ab7;
    }

    .funkyradio-success input[type="radio"]:checked ~ label:before,
    .funkyradio-success input[type="checkbox"]:checked ~ label:before {
        color: #fff;
        background-color: #5cb85c;
    }

    .funkyradio-danger input[type="radio"]:checked ~ label:before,
    .funkyradio-danger input[type="checkbox"]:checked ~ label:before {
        color: #fff;
        background-color: #d9534f;
    }

    .funkyradio-warning input[type="radio"]:checked ~ label:before,
    .funkyradio-warning input[type="checkbox"]:checked ~ label:before {
        color: #fff;
        background-color: #f0ad4e;
    }

    .funkyradio-info input[type="radio"]:checked ~ label:before,
    .funkyradio-info input[type="checkbox"]:checked ~ label:before {
        color: #fff;
        background-color: #5bc0de;
    }

    .funkyradio-new input[type="radio"]:checked ~ label:before,
    .funkyradio-new input[type="checkbox"]:checked ~ label:before {
        color: #fff;
        background-color: purple;
    }

    /****** Login Modal Styles ******/

    #register-from-login {
        font-size: 16px;
        color:black;
    }
        #register-from-login:hover {
            text-decoration: underline;
        }
    #login_lost_btn {
        font-size: 16px;
        color: black;
    }
        #login_lost_btn:hover {
            text-decoration: underline;
        }

        #lost_login_btn {
            font-size: 16px;
            color: black;
        }
            #lost_login_btn:hover {
                text-decoration: underline;
            }


    #login-modal .modal-dialog {
        width: 350px;
    }

    #login-modal input[type=text], input[type=password] {
        margin-top: 10px;
    }

    #div-login-msg,
    #div-lost-msg,
    #div-register-msg {
        border: 1px solid #dadfe1;
        height: 30px;
        line-height: 28px;
        transition: all ease-in-out 500ms;
    }

        #div-login-msg.success,
        #div-lost-msg.success,
        #div-register-msg.success {
            border: 1px solid #68c3a3;
            background-color: #c8f7c5;
        }

        #div-login-msg.error,
        #div-lost-msg.error,
        #div-register-msg.error {
            border: 1px solid #eb575b;
            background-color: #ffcad1;
        }

    #icon-login-msg,
    #icon-lost-msg,
    #icon-register-msg {
        width: 30px;
        float: left;
        line-height: 28px;
        text-align: center;
        background-color: #dadfe1;
        margin-right: 5px;
        transition: all ease-in-out 500ms;
    }

        #icon-login-msg.success,
        #icon-lost-msg.success,
        #icon-register-msg.success {
            background-color: #68c3a3 !important;
        }

        #icon-login-msg.error,
        #icon-lost-msg.error,
        #icon-register-msg.error {
            background-color: #eb575b !important;
        }

    .register-header {
        min-height: 16.43px;
        padding: 10px 10px 10px 10px;
        border-bottom: 0px;
        background-color: #33383c;
    }

    .img-logo {
        max-height: 300px;
        max-width: 300px;
    }

    /* #########################################
   #    override the bootstrap configs     #
   ######################################### */

    .modal-backdrop.in {
        /*filter: alpha(opacity=50);
    opacity: .8;*/
    }


    .modal-content {
        background-color: #ececec;
        border: 1px solid #bdc3c7;
        border-radius: 0px;
        outline: 0;
    }

    .modal-header {
        min-height: 16.43px;
        padding: 15px 15px 15px 15px;
        border-bottom: 0px;
    }

    .modal-body {
        position: relative;
        padding: 5px 15px 5px 15px;
    }

    .modal-footer {
        padding: 15px 15px 15px 15px;
        text-align: left;
        border-top: 0px;
    }

    .checkbox {
        margin-bottom: 0px;
    }

    .btn {
        border-radius: 0px;
    }

        .btn:focus,
        .btn:active:focus,
        .btn.active:focus,
        .btn.focus,
        .btn:active.focus,
        .btn.active.focus {
            outline: none;
        }

    .btn-lg, .btn-group-lg > .btn {
        border-radius: 0px;
    }

    .btn-link {
        padding: 5px 10px 0px 0px;
        color: #95a5a6;
    }

        .btn-link:hover, .btn-link:focus {
            color: #2c3e50;
            text-decoration: none;
        }

    .glyphicon {
        top: 0px;
    }

    .form-control {
        border-radius: 0px;
    }

#login-response, #reset-response {
    text-align: center;
    margin-top: 10px;
    background-color: rgba(255, 0, 0, 0.57) !important;
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 5px 3px -3px #777;
}
/****** Media Queries ******/
@media (min-width: 1200px) {
    .modal-xl {
        width: 90%;
        max-width: 1200px;
    }
}