@font-face {
    font-family: "Next Bold";
    src: url("/Portals/_default/Skins/EMInFocus/Fonts/fontfabric_-_nexa-bold-webfont.woff2") format("woff2"),
        url("/Portals/_default/Skins/EMInFocus/Fonts/fontfabric_-_nexa-bold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Next Light";
    src: url("/Portals/_default/Skins/EMInFocus/Fonts/fontfabric_-_nexa-light-webfont.woff2") format("woff2"),
        url("/Portals/_default/Skins/EMInFocus/Fonts/fontfabric_-_nexa-light-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Next Regular";
    src: url("/Portals/_default/Skins/EMInFocus/Fonts/nexa_regular-webfont.woff2") format("woff2"),
        url("/Portals/_default/Skins/EMInFocus/Fonts/nexa_regular-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

:root {
    --font-family-regular: "Next Regular";
    --font-family-bold: "Next Bold";
    --font-family-light: "Next Light";
    --main-green: #227b13;
    --dark-green: #00661f;
    --main-gray: #727272;
    --light-gray: #f8f8f8;
    --main-purple: #750068;
    --main-pink: #a93a9a;
}

html, body, form {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: var(--font-family-regular), Helvetica, sans-serif !important;
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-regular), "trebuchet mt", arial !important;
    overflow-x: hidden;
}

#wrap {
    flex: 1 0 auto;                    /* grows to push footer down */
    min-height: calc(100vh - 275px);   /* ensures footer doesn't overlap when content is short */
}

#main { 
    border-top: 3px solid var(--main-gray); 
    position: relative; 
    z-index: 1; 
}

#header { 
    position: relative; 
    background-color: #fff; 
    color: #fff; 
    font-size: 13pt; 
    margin-bottom: 0; 
    margin: 0 auto; 
    max-width: 1200px; 
}

#header a, #header a:hover  { color: var(--main-green); }

#footer { 
    flex-shrink: 0;                    /* never shrinks */
    height: 250px;                     /* fixed height as requested */
    background-color: var(--light-gray);
    color: #000;                       /* changed to dark text for readability on light bg */
    font-size: 13pt;
    width: 100%;
}

/* Optional: center content vertically inside footer */
#footer .container-fluid {
    height: 100%;
    max-width: 1200px; 
}

#footer .container-fluid img { width :335px; }
#footer .footer-foooter { background-color: var(--main-green); }
#footer a.footer-menu { color: var(--dark-green); font-family: var(--font-family-bold); }
#footer .title { color: var(--dark-green); font-family: var(--font-family-bold); }
#footer a.utility-item { font-size: 14px; text-align: center; color: var(--main-purple); }
#footer a.utility-item:hover { color: var(--dark-green); }
#footer a, #footer a:hover { color: var(--main-green); }  /* better contrast */
#footer a.footer-gray, #footer .footer-gray { font-size: 16px; font-family: var(--font-family-bold); color: var(--main-gray); }
#footer .d-block { color: var(--main-purple);; }

.hero-pane { width: 100%; }
.hidden { display: none; }
.upper { text-transform: uppercase; }
.header-top-nav, .header-top-nav a { color: var(--dark-green); }

.header-bottom-nav { 
    position: relative; 
    z-index: 1030; 
    font-size: 18px; 
    color: var(--main-gray); 
    font-family: var(--font-family-bold); 
    text-align: center; 
}
.header-bottom-nav > div { 
    cursor: pointer; 
    transition: background 0.2s; 
    line-height: 60px; 
} 

/* General active/hover for normal nav items (green) */
.header-bottom-nav > div.active:not(.my-eyemed),
.header-bottom-nav > div:hover:not(.my-eyemed) {
    background-color: var(--dark-green) !important;
    color: #fff !important;
}

/* My EyeMed: purple by default, light pink when hovered OR active (panel open) */
.header-bottom-nav > div.my-eyemed {
    background-color: var(--main-purple) !important;
    color: #fff !important;
}
.header-bottom-nav > div.my-eyemed:hover,
.header-bottom-nav > div.my-eyemed.active {
    background-color: var(--main-pink) !important;
    color: #fff !important;
}

.header-search { color: var(--main-green); cursor: pointer; }
.search-wrapper { position: relative; width: 100%; }
.search-wrapper .form-control.search { padding-right: 38px; border-radius: 6px; }
.search-wrapper .header-search { 
    position: absolute; 
    right: 15px; 
    top: 25%; 
    transform: translateY(-50%); 
    font-size: 1.1rem; 
}
.mega-menu-panel { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 100%; 
    z-index: 1050; 
    display: none; 
    background: white; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
    border-top: 3px solid var(--main-green); 
}
.mega-menu-panel .container-fluid { padding-left: 1rem; padding-right: 1rem; }
.mega-menu-panel .main-entry { 
    text-align: right; 
    color: var(--dark-green); 
    line-height: 60px; 
    font-family: var(--font-family-bold); 
}
.mega-menu-panel .main-entry:hover { cursor: pointer; }
.mega-menu-panel a.sub-entry { 
    color: var(--main-gray) !important; 
    display: block; 
    text-decoration: none; 
    padding: 15px 0 10px 0; 
}
.mega-menu-panel .sub-entry:hover { 
    cursor: pointer; 
    text-decoration: underline; 
}
.main-subs { 
    min-height: 100%;  
    display: block; 
}

a.btn { text-decoration: none !important; } 
a.btn-purple { background-color: var(--main-purple); color: #fff; }
a.btn-purple:hover { background-color: var(--main-pink); color: #fff; }
a.btn-green { background-color: var(--dark-green); color: #fff; }
a.btn-green:hover { background-color: var(--main-green); color: #fff; }
a:hover { text-decoration: none m !important; }
tbody, td, tfoot, th, thead, tr { border-style: none !important; }
figure.image-style-align-center { display: table; margin-left: auto !important; margin-right: auto !important; }
figure.image-style-align-left { float: left !important; margin-right: 1rem !important; margin-bottom: 1rem !important; }
figure.image-style-align-right { float: right !important; margin-left: 1rem !important; margin-bottom: 1rem !important; }
figure.image.image_resized { display: block !important; box-sizing: border-box; max-width: 100% !important; }
figure.image.image_resized img { width: 100% !important; height: auto !important; }
figure.image.image_resized figcaption { display: block; }