/* 
    Root variables for quick custom style changes
*/
:root {
  --primary-color: #474a9b;
  --primary-light: #e9eaf3;
  --hover-primary: #36387a;
}

/* Base Styles */
* { margin: 0; padding: 0;}
html { height: 100% }
body { font-family: 'Poppins', sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.main-content { flex-grow: 1; }
.flex-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

.clear { clear: both;}
.hidden { display: none; }
.shadow { box-shadow: 2px 3px 10px 3px rgba(0,0,0,0.2);}
.rounded { border-radius: 5px;}
.red { color: red;}

.floatLeft { float: left; }
.floatRight { float: right; }
.clear { clear: both;}

/* Typography */
h1, h2, h3, h4 { color:#000000; margin: 0 0 12px 0; }
h1 { font-size: 1.8em;}
h2 { font-size: 1.6em;}
h3 { font-size: 1.17em;}
h4 { font-size: 16px;}

/* Tables */
table { width: 100%; border-radius: 5px 5px 5px 5px; overflow: hidden; border-collapse: collapse; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
table th { text-align: left; }
table td { padding: 14px 10px 14px 20px; font-size: 15px; }
table tr:hover { background-color: #ebebeb; }

#mainTitle { margin-top: 20px; }

/* Footer */
#footer { background: black; margin-top: auto; }
#footer p { color: white; }
.footer-copyright { color: #d4deeb; }
.row-container { display: flex; flex-direction: row; align-items: center; justify-content: center; padding:8px 0; margin:0 auto; width:15%; }
.copyright { height: 100px; text-align:center; align-content:center; }

/* Base Elements */
p { color: #000000; }
a { text-decoration: none; color: var(--primary-color); }
img { width: 100%; height: 100%; }
label:has(+ input[data-val-required]):after, label:has(+ textarea[data-val-required]):after { content: ' *'; color: red; }

/* UI Elements */
.ui-autocomplete { border-radius: 5px; }
.ui-menu-item:hover { border-radius: 5px; background: var(--primary-color); }
.ui-state-focus { border-radius: 5px; background: #efefef; }

/* Map Elements */
#mapWrapper { height: 500px; }
#map { height: 500px; }
#bannerWrap { height: 200px; overflow: hidden; padding-bottom:25px; }
#bannerWrap img { display:block; object-fit: cover; }
.bannerBorder { border: none; height: 1px; background-color: #ccc; margin: 0px 0px; }

/* Toast Notifications */
#toastNote { position: fixed; top: 80px; right: 20px; z-index: 9999; max-width: 400px; width: calc(100% - 40px); pointer-events: none; }
.toast { padding: 15px 20px; margin-bottom: 10px; position: relative; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); pointer-events: auto; transform: translateX(450px); opacity: 0; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.toast.toast-show { transform: translateX(0); opacity: 1; }
.toast.toast-hide { transform: translateX(450px); opacity: 0; }
.toast p { margin: 0; color: #280000; font-size: 14px; padding-right: 30px; }
.toast p span { font-size: 20px; margin: 0 8px 0 0; position: relative; top: 3px; }
.toast a.closeToast { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 20px; cursor: pointer; transition: opacity 0.2s; }
.toast a.closeToast:hover { opacity: 0.7; }
.toast.err { background: #fff0f0; border-left: 4px solid #f20d0d; border-top: 1px solid #f20d0d; border-right: 1px solid #f20d0d; border-bottom: 1px solid #f20d0d; }
.toast.err p span { color: #f90000; }
.toast.err a.closeToast { color: #ef1010; }
.toast.succ { background: #f3fff3; border-left: 4px solid #04af00; border-top: 1px solid #04af00; border-right: 1px solid #04af00; border-bottom: 1px solid #04af00; }
.toast.succ p span { color: #04af00; }
.toast.succ a.closeToast { color: #04af00; }
.toast.std { background: #f4f4f4; border-left: 4px solid #298ad5; border-top: 1px solid #a5a5a5; border-right: 1px solid #a5a5a5; border-bottom: 1px solid #a5a5a5; }
.toast.std p span { color: #298ad5; }
.toast.std a.closeToast { color: #858585; }

/* Mobile responsive toast */
@media (max-width: 768px) {
    #toastNote { top: 70px; right: 10px; left: 10px; width: auto; max-width: none; }
    .toast { transform: translateY(-100px); }
    .toast.toast-show { transform: translateY(0); }
    .toast.toast-hide { transform: translateY(-100px); }
}

/* ==================================
    GLOBAL FORM STYLES
=====================================*/
.formBox input[type="text"], .formBox input[type="email"], .formBox input[type="date"], .formBox input[type="tel"], .formBox input[type="time"], .formBox input[type="datetime-local"], .formBox input[type="password"], .formBox input[type="url"], .formBox select, .formBox textarea { width: 100%; box-sizing: border-box; font-family: Poppins,Helvetica,sans-serif; background-color: #fff !important; background-image: none !important; border: 1px solid #d4d5d9 !important; border-radius: 5px !important; padding: 5px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; font-size: 14px; }

input[type="text"]:focus, input[type="date"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="datetime-local"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="url"]:focus, textarea:focus, select:focus { border: 1px solid var(--primary-color) !important; outline: 0px; }

.formBox input[type="radio"] { position: relative; top: 2px;}
.formBox input[type="checkbox"] { margin: 0; width: auto; position: relative; top: 3px;}

.formBox { position: relative; margin-bottom: 15px; }
.formBox label { display: block; color: black; font-weight: bold; margin-bottom: 3px; font-size: 14px; }

.formBox.hasRadios label, .formBox.radioGrp label, .formBox.hasCheck label { display: inline-block; margin-left: 5px; margin-right: 15px; font-weight: normal; color: #5c5c5c !important; }
.formBox.radioGrp h5 { font-size: 14px; margin: 0 0 3px; /*color: var(--primary-color);*/ font-weight: bold;}
.formBox.fileBox { border: 2px solid #ccc; padding: 10px;}

.formBox select { font-size: 14px !important; }
.formBox input[type="date"] { font-size: 12px !important; }

/* Radio button layout: Yes/No pairs inline by hiding br tags between them */
.formBox.radioGrp label + br + label { display: inline-block; }
.formBox.radioGrp label + br + label + br { display: none; }
.formBox.radioGrp label:first-of-type + br { display: none; }

/* Conditional/nested form sections - indent to show relationship */
.xtraInfo { margin-left: 25px; padding-left: 15px; border-left: 3px solid #e0e0e0; }

.formGroup { margin-right: 20px;}

.cityStateZip { gap: 5px; }
.cityStateZip .formBox { margin-bottom: 0px; }
.formBox.cityStateZip div.csz { margin-right: 3%;}
.formBox.cityStateZip div.stateBox { width: 16%;}
.formBox.cityStateZip div.cityBox { width: 45%;}
.formBox.cityStateZip div.zipBox { width: 30%;}

.formBox.hasTwo .formBox { width: 48%; margin: 0 3% 0 0; }
.formBox.hasTwo .formBox:last-child { margin: 0;}

.formBox.hasThree .formBox { width: 31%; margin: 0 3% 0 0;}
.formBox.hasThree .formBox:last-child { margin: 0;}

.formBox.borderTop { border-top: 1px solid #ccc; padding-top: 20px; margin-top: 25px;}

/* formBoxWrapper is found only in in SSG Custom fields - Check if can be used globally in flagship */
.formBoxWrapper .formBox {width: 42%;margin-right: 4%;float: left;}

/* Error styling for validation */
input[type="text"].error, input[type="email"].error, input[type="date"].error, input[type="tel"].error, input[type="file"].error, input[type="datetime-local"].error, input[type="password"].error, input[type="url"].error, textarea.error, select.error,
input[type="text"].input-validation-error, input[type="email"].input-validation-error, input[type="date"].input-validation-error, input[type="tel"].input-validation-error, input[type="file"].input-validation-error, input[type="datetime-local"].input-validation-error, input[type="password"].input-validation-error, input[type="url"].input-validation-error, textarea.input-validation-error, select.input-validation-error {
    border: 1px solid red !important;
    background: #fadfdf !important;
}

/* Standard ASP.NET Core validation message styling */
.field-validation-error { color: red; font-size: .8em; font-weight: normal; }

.field-validation-valid { display: none; }

/* Custom error class for consistency */
span.error { color: red; font-size: .8em; font-weight: normal; display: block; }

input[type="text"].success, input[type="email"].success, input[type="date"].success, input[type="date"].success, input[type="tel"].success, input[type="file"].success, input[type="datetime-local"].success, input[type="password"].success, input[type="url"].success, textarea.success, select.success { border: 1px solid #44db40 !important; background: #e7fce6 !important;}

input.readonly, input[type="text"]:read-only, textarea.readonly, textarea:read-only, .formBox input:disabled, .formBox select:disabled, .formBox textarea:disabled { background: #efefef !important; color: #5c5c5c !important; opacity: 1;}

.formBox p.frmHlpTxt { font-size: 11px; color: #828282; margin: 2px 0 0; }
p.error{ font-size: 11px; color: red; font-weight: normal;}
#errorSummary { display: none; font-size: 12px; padding: 10px; background: #fadfdf; border: 1px solid red; margin-bottom: 20px;}

.formBox.radioGrp h5.required:after, label.required:after { content: " *"; color: red;}

/* Layout Components */
.flex-container { display: flex; flex-direction: row; }
.cardCol-2 { width: 50%; padding: 0 30px;}
.cardCol-3 { width: 33%; padding: 0 20px;}
.cardCol-4 { width: 25%; padding: 0 20px;}

.contentWrapper { width: 90%; margin: 0 auto 0; position: relative; }
.primaryColor { background: var(--primary-color); }

/* ======================================================
    Profile Pages
=====================================================*/
.profileContent { padding: 20px 0 50px; border-top: 1px solid #efefef; }
.profileContentTitle { margin: 0 0 10px; }
.profile-sub-title { margin-bottom: 15px; }
.page-subheading { font-size: 1rem; color: #000000; margin: -5px 0 25px 0; font-weight: 400; line-height: 1.5; }

/* ==== My Activities ==== */
table.actTable th { padding: 14px 10px 14px 20px; background: var(--primary-color); color: white; }
table.actTable th a { font-size: 17px; font-weight: 600; color:white; }
table.actTable th i{ display: none; }

/* ==== my documents ==== */
#newDocBtn { position: absolute; top: 70px; right: 0; }
.docRow { border: 2px solid #efefef94; background-color: #e1e1e161; padding: 20px; margin-bottom: 20px; border-radius: 5px; }
.docRow p { margin: 0; font-size: 14px; }
.docRowLeft { float: left; width: 30%; }
.docRowLeft p { font-size: 20px; color: black; }
.docRowRight { float: right; width: 20%; text-align: right; }
.docRowCenter { float: right; width: 25%; padding-top: 8px;}

/* PDF Viewer Drawer */
.pdf-drawer { position: fixed; top: 0; right: -100%; width: 80%; height: 100%; background: white; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3); z-index: 1001; transition: right 0.3s ease-in-out; display: flex; flex-direction: column; }
.pdf-drawer.open { right: 0; }
.pdf-drawer-header { background: #f5f5f5; padding: 15px 20px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.pdf-drawer-header h3 { margin: 0; font-size: 1.2rem; }
.pdf-controls { display: flex; align-items: center; gap: 10px; }
.pdf-nav-btn { background: white; border: 1px solid #ddd; padding: 8px 12px; cursor: pointer; border-radius: 4px; transition: background 0.2s; color: #333; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.pdf-nav-btn:hover { background: #e9e9e9; }
.pdf-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pdf-close-btn { background: #dc3545; color: white; border: none; padding: 8px 12px; cursor: pointer; border-radius: 4px; transition: background 0.2s; }
.pdf-close-btn:hover { background: #c82333; }
#pdfPageInfo { font-size: 14px; color: #666; }
#pdfZoomLevel { font-size: 14px; color: #666; min-width: 45px; text-align: center; }
.pdf-drawer-content { flex: 1; overflow: auto; padding: 20px; background: #525659; display: flex; justify-content: center; align-items: flex-start; }
#pdfCanvas { max-width: 100%; height: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }

/* ==== My Skills ==== */
#current-skills-list { display: flex; }
#current-skills-list2 { display: flex; gap: 10px; }
#current-skills { margin-bottom: 15px; }
.vertical-divider { border-left: 1px solid #ccc; width: 1px; margin: 0 10px; }
#current-skills-list span{ color: red; margin-left: 5px; }
#current-skills-list2 span { color: red; margin-left: 10px; }
.individual-skill-list { display: flex; align-items: center; }
.individual-skill-list2 { display: flex; align-items: center; background: var(--primary-light); border-radius: 5px; border: 1px solid var(--primary-color); padding: 0 10px; }

#skill-button-row { display: flex; gap: 15px; }

/* ==================================
    GLOBAL BUTTON STYLES
===================================== */
.ssBtn { display: block; padding: 15px; width: 100%; text-decoration: none; text-align: center; font-size: 16px; font-weight: 500; border: 1px solid #25265e; border-radius: 5px; box-sizing: border-box; cursor: pointer; }
.ssBtn span { font-size: 18px; position: relative; top: 1px; }

.primBtn { background: var(--primary-color); color: #fff !important; border: 1px solid var(--primary-color); }
.primBtn:hover { background: var(--hover-primary); }

.secBtn { background:#efefef; color: #5c5c5c; border: 1px solid #babecb; }
.secBtn:hover { background: #e4e4e4 }

.ssBtn.btn-lg { font-size: 18px; padding: 12px 20px; }
.ssBtn.btn-med{ font-size:15px; padding: 12px 20px;}
.ssBtn.btn-sm { font-size: 12px; padding: 6px 12px; }

.txt-link { text-decoration: none; cursor:pointer; color: var(--primary-color); }
.txt-link:hover { text-decoration: underline; }

.stickyBtnBox { position: fixed; bottom: -5px; left: 0; width: 100%; padding: 20px; background: rgba(248, 248, 248, 0.56) ; z-index: 100; text-align: left; box-sizing: border-box; border-radius: 15px; display: flex; gap: 10px; }
.stickyBtnBox .btnBox { flex: 1; margin: 0; }

.ssBtn.smBtn { padding: 9px; font-size: 14px; float: left; display: inline; width: auto; }

#header { background:#25265e; margin-bottom: 20px; padding: 7px 5% 5px; }
#headerLeft { float: left; width: 40%; max-width: 150px; }
#headerRight { float: right; width: 80px; text-align: right; padding-top: 0.9%; }
#headerRight span { color: #fff; font-size: 26px; }
#headerRight a { display: block; float: left; }

.loginImg { width: 50%; margin: 30px auto 0; }
#welcomeMsg { text-align: center; }
#welcomeMsg a { display: block; background: #fff; border: 2px solid #25265e; color: #25265e; font-size: 11px; font-weight: 600; padding: 12px; margin-bottom: 20px; }
#welcomeMsg a span { font-size: 36px; margin-bottom: 10px; }
#welcomeMsg a:active { background: #efefef; }

.container.errorMsg { text-align: center; background: #fceeee; border: 1px solid #f3c4c4; color: #da5555; padding: 20px; box-sizing: border-box; font-size: 16px; }
a.errorLink { display: block; margin-top: 25px; text-align: center; font-size: 16px; padding: 0 5%; }

/* Mobile menu overlay - covers all content when menu is open */
#fade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9998 !important;
    display: block !important;
}

/* Ensure mobile menu is above the fade overlay */
body.menu-open {
    overflow: hidden;
}

/* ==================================
    GLOBAL PAGINATION STYLES
=====================================*/
.navPagination { display: flex; justify-content: center; margin: 0px 0px 40px 0px; }
.navPagination ul { list-style: none; padding: 0; display: flex;gap: 5px; }
.navPagination .page-item { display: inline; } 
.navPagination .page-link { display: block; padding: 10px 10px; margin: 0 5px; text-decoration: none; border-radius: 4px; transition: background-color 0.3s; color: var(--primary-color); }
.navPagination .page-link:hover { background: #e2e6ea; }
.navPagination .page-item.active .page-link { background: var(--primary-color); color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2); }

/* ==================================
    FIELD VALIDATION STYLES
=====================================*/
.field-validation-error { color: #e80c4d; font-weight: bold; }
.field-validation-valid { display: none; }
input.input-validation-error { border: 1px solid #e80c4d!important; }
.validation-summary-errors { color: #e80c4d; font-weight: bold; font-size: 1.1em; }
.validation-summary-valid { display: none; }

/* ================== START OF PAGES ================ */
/* ==================================
    Job Search Loading 
===================================== */


/* ==================================
    Upload File
===================================== */
#uploadResumeWrapper h2 { margin: 15px 0 25px; }
#uploadFileBox { border: 1px solid #ccc; padding: 20px 25px 25px; border-radius: 5px; margin-bottom: 20px; }
.or { border-top: 1px solid #ccc; margin: 30px 0; position: relative; }
.or p { margin: 0; position: absolute; top: -19px; left: 44%; padding: 5px 15px; font-size: 18px; background: #fff;  color: #5c5c5c; }

@media (min-width: 769px) {
   #uploadResumeWrapper { width: 37.5%; margin: 0 auto 50px; }
   #uploadFileBox .btnBox button { margin: 0 auto; }
}

/* ==================================
    Contact Us
===================================== */
#contactUsWrapper { margin-top: 30px; }
#contactUsWrapper h2 { margin-bottom: 30px; }
.contactUsDetails .bold { margin: 10px 0 5px; font-weight: bold; }

#disclaimer h4, #disclaimer p { font-size: 12px; }

#map-container-contact-us { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; }
#map-container-contact-us iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 769px) {
    #contactUsWrapper .flex-container { flex-direction: column; }
    #contactUsWrapper .cardCol-2 { width: auto; padding: 0px; margin-bottom: 25px; }
}

/*===================================
Listing of jobs: Index & Search Results
=====================================*/
#jsContent { margin-top: 10px; }

#jsListingSection { margin-bottom: 15px; }
.jsListingGroup { margin-top: 20px; }
.jsListingHeader { font-size: 1.2rem; background: #efefef82; padding: 8px 15px; cursor: pointer; border-radius: 5px; border: 2px solid #efefef}
.jsListingHeader h3 { margin: 0; color: #646464; }
.jsFilter { margin-top: 5px; }
.jsListing { border-bottom: 1px #efefef solid; padding: 15px 15px; }
.jsListing:last-child { border-style: none; }
.jsList { list-style: none; }
.jsListingTitle { font-size: 1.2rem; margin-bottom: 7px; font-weight: bold; }
.jsListingBtn { margin-top: 25%; }
.jsListing.flex-container { justify-content: space-between; }

.jsListingBtn a { border-radius: 15px; padding: 10px 10px; color: #646464; }
.jsListingBtn a:hover { background: var(--primary-light); border: none; color: var(--primary-color); }
.jsListingBtn.flexRight { margin: auto 0 auto auto; }
.jsListingBtn i { font-size: 30px; position: relative; top: 5px; }

.jsListingLocation p { margin-bottom: 5px; color: #646464; }
.jsListingDate p { color: #646464; }
.jsListingLocation span , .jsListingDate span { font-weight: bold; }

#showMapBtn { position: absolute; top: 30px; right: 0; }
#showMapBtn span { margin-right: 5px; }

@media (min-width: 768px) {
    .contentWrapper.flexbox { display: flex; gap: 24px; }
    .sidebar { flex: 0 0 25%; align-self: flex-start; background: #fff; }
    #jsListContainer { flex: 0 0 75%; position:relative; }
}

/* ==================================
    Search Header
===================================== */
#searchWrapper { margin: 0 auto; position: relative; box-sizing: border-box; padding: 10px 20px 0px 20px; margin-bottom: 25px; border: solid 2px #e5e7eb; background: #efefef82; }
#searchTitle { }
#searchTitle h3 { margin: 0px; }
#searchFormWrapper { border-radius: 5px; position: relative; z-index: 100; }
#searchBoxes { }
.searchBox { display: flex; flex-direction: column; position: initial; }
.searchBox label { font-size: 1rem; color: #484848; padding: 10px 0; }
.searchBox input[type="text"] { font-size: 1rem; color: black; background: #efefef; padding: 7px 0 7px 7px; border-radius: 5px;}
.searchBox .input, select { padding: 7px 12px; font-size: 1em !important; }
.searchBox.btnBox { margin: 0; padding: 0; }

.searchBoxMenu { display: flex; flex-direction: row; }
.searchBoxMenu #labelLoc { width: 65%; }
#searchDist { font-size: 1.1em !important; border: none !important; color: #5c5c5c; margin-left: 0; padding-left: 0; }
    
#searchBtn {}
#searchBtn-mb { display: none; width: 30%; margin: 0 auto; }
#clearSearchBtn {}

/* Search button container for side-by-side layout */
#searchButtonContainer { display: flex; gap: 10px; margin-bottom: 10px; }
#searchButtonContainer .btnBox { flex: 1; margin: 0; }
    
#advSearchBtn { text-align: center; margin-top: 10px; }
#advSearchBtn a { margin: 0 auto; color: var(--primary-color); text-decoration: none; cursor:pointer; font-size: .9em; }
#advSearchBtn a:hover { text-decoration: underline; } 
#advSearchBtn span { margin-left: 5px; transition: transform 0.5s; }

#advSearchBox { margin: 2% 10% 10px; }

#advSearchContent { opacity: 0; overflow: hidden; transition: opacity 0.5s ease; transition: max-height 0.5s ease-out; }
#advSearchContent.show { opacity: 1; }

.searchBoxButton a { border: 1px solid #9A9A9A; color: black; padding: 5px; border-radius: 5px; margin: 10px 10px; }
.searchBoxButton a:hover { background: #f2f2f2; }
#searchBoxes .flex-container { flex-direction: row; margin: 20px auto 10px; justify-content: center; }


#search-buttons-container { display: flex; justify-content: space-between; margin-bottom: 10px;}
#search-buttons-container .ssBtn { font-size: 15px; padding: 10px 40px; }
#search-options { }
#search-options .formBox { margin-bottom: 0; }
#search-options .formBox label { font-size: 13px; }
#search-options .txt-link { font-size: 13px; }
#search-options span { margin-right: 5px; }
#load-saved-search { margin-left: 5px; }

#mb-navBarMenu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 90%;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
    transition: right 0.4s ease;
    z-index: 9999 !important;
    overflow-y: auto;
}
#mb-navBarMenu.show { right: 0; }

.searchBox.selectFilters { border: none; }
.searchBox.selectFilters select { color: #737373; border: 1px solid #737373 !important; }
.searchBox.selectFilters label { font-size: .9em; color: #9a9a9a; padding: 10px 0; }

#searchFilters { display: flex; justify-content: center; gap: 25px; color: #9a9a9a; margin-top: 15px; }
.checkboxDropdown { position: relative; display: inline-block; }

.checkboxDropdownMenu { display: flex; margin: 0; padding: 5px 15px; border: 1px solid; border-radius: 20px; gap: 5px; background: #FFFFFF; color: #B6B8BE; box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.2) }
.checkboxDropdownMenu:hover { color: black; }
.checkboxDropdownMenu .fa-solid { margin-left: 5px; }

.checkboxDropdownContent { display: none; position: absolute; background-color: #fff; border: 1px solid #ccc; min-width: 130px; margin-top: 2px; z-index: 20; border-radius: 3px; padding-left: 10px; box-shadow: 2px 3px 10px 3px rgba(0, 0, 0, 0.2); }
#cityFiltersContainer .checkboxDropdownContent { min-width: 250px; }
.dropdownScrollable { max-height: 150px; overflow-y: auto; padding-top: 8px; }

.checkboxDropdown:hover .checkboxDropdownContent { display: block; }

.state-filter-item, .city-filter-item { margin-bottom: 5px; }

.activeFilter { color: black; font-size: .8rem; }
.selectedFilter { font-weight: bold; }
.inactiveFilter { cursor: not-allowed; }

#searchDivider { display: flex; align-items: center; text-align: center; font-size: 12px; }
#searchDivider::before, #searchDivider::after { content: ''; flex: 1; border-bottom: 1px solid #ddd; }
#searchFilterTitle { padding: 0 0 0 5px; }
#searchFilterIcon { padding: 0 5px 0 5px; }

/* Clear Filters Box Styling */
#clear-filters-box { }
#clear-filters-box a { color: var(--primary-color); text-decoration: underline; font-size: 14px; }
#clear-filters-box a:hover { color: var(--hover-primary); text-decoration: none; }

/* Styles for the Selected Filters */
#selectedSearchWrapper { border-radius: 5px; color: #4c4c4c; }
.selectFilters { display: inline-flex; flex-direction: column; margin-bottom: 10px; margin: 0 auto; margin: 10px 0px 10px 0px; width:90%; }
.selectFilters h4 { margin-bottom:5px; color: #666666; }
.categoryFilter { padding: 0px 0px 0px 5px; }
.filterBox { padding: 5px 30px 5px 10px; border: 1px solid #919191; border-radius: 30px; margin: 8px 10px 5px 0px; position: relative; color: #676767; font-size: 0.9em; background-color: #e4e4e4; }
.filterBox span { position: absolute; top:8px; right:7px; }
.filterBox span:hover { color: red; }

.remove-filter { border-radius: 5px; cursor: pointer; font-size: 14px; }
.remove-filter:hover { text-decoration: underline; }
#remove-filter-box { display: flex; align-items: center; }
.hoverLink { cursor: pointer; }
.hoverLink:hover{ text-decoration: underline; }
.select-options { display: flex; flex-wrap:wrap; }

.selectButton { cursor: pointer; }

/* Styles for the sidebar filter */
.sidebar-filters { margin-bottom: 16px; }
.filter-dropdown { border-bottom: 1px solid #ddd; }
.filter-dropdown .filter-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 6px 0; }
.filter-dropdown .filter-header span { color: black; }
.toggle-icon { transition: transform 0.3s ease; }
.filter-dropdown.active .toggle-icon { transform: rotate(180deg); }
.filter-options { display: none; overflow: hidden; transition: max-height 0.3s ease; padding-bottom: 10px; }
.filter-dropdown.active .filter-options { display: block; }
.sub-filter { margin-bottom: 10px; }
.sub-filter label { display: block; margin-bottom: 4px; font-size: 0.9em; color: #333; }
.scrollable-options { max-height: 105px; overflow-y: auto; border: 1px solid #ccc; padding: 5px; border-radius: 4px; background: #fff; }
.scrollable-options ul { list-style: none; padding: 0; margin: 0; }
.scrollable-options li { margin-bottom: 8px; }
.filter-options ul { list-style: none; padding: 0; margin: 0; }
.filter-options li { margin-bottom: 7px; display: flex; }
.filter-options input[type="checkbox"] { margin-right: 6px; }
.filterCount { border: 1px black solid; border-radius: 15px; padding: 2px 7px; margin: 0 auto 0 5px; }

.fillOptions { width: 92%; background: #ffffff; border-radius: 5px; position: absolute; display: none; flex-direction: column; }
.titleOptions { padding: 10px 10px 10px 10px; flex: 1 0 25%; min-width: 25%; }
.titleOptions:hover { background: #a4a4a447; cursor: pointer; }
.fillOptions a { color:black !important; }
.scrollWrapper { overflow-x: auto; width: 100%; }

/* ==================================
    Nav Bar - 3 Section Structure
===================================== */

/* 1. Top colored bar - static, full width */
#navBarTop {
    background: var(--primary-color);
    height: 10px;
    width: 100%;
}

/* 2. Client section - full width with border, content constrained */
#navBarClient {
    width: 100%;
    border-bottom: 2px solid #e5e7eb;
    padding: 10px 0;
}

#navBarClientInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#navBarLogo {
    height: 50px;
}

#navBarLogo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

#navBarMobileBtn {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: #333;
    padding: 10px;
}

#navBarMobileBtn:hover {
    color: var(--primary-color);
}

/* User Profile Indicator */
#navBarUserProfile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-left: auto;
    margin-right: 15px;
}

#navBarUserProfile i {
    font-size: 20px;
}

#navBarUserProfile .user-display-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 3. Navigation menu section - full width, content constrained */
#navBarMenu {
    width: 100%;
    background:#efefef82;
    border-bottom: 2px solid #e5e7eb;
}

#navBarMenuInner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#navWrapper {
    padding-top: 0;
}

#navBarContainer {
    width: 100%;
    display: flex;
    align-items: center;
}

/* account option */
.navBarElements { padding: 0; margin: 0; display: flex; }

#navBarMenu li a {
    text-decoration: none;
    color: #333;
    padding: 10px 5px;
    font-weight: 500;
    transition: color 0.3s ease;
    margin: 0;
    display: inline-block;
    position: relative;
}

#navBarMenu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

#navBarMenu a:hover::after {
    background-color: var(--primary-color);
}

#navBarMenu a.active::after {
    background-color: var(--primary-color);
}

#navBarMenu a:hover {
    color: var(--primary-color);
}

#navBarMenu a.active {
    color: var(--primary-color);
}

#navBarMenuInner ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}

#navBarMenu li { margin-left: 20px; }
#navBarMenu li ul li { margin-left: 0; }
#navBarMenu span, #utilityBarMenu span{ margin-left: 5px; }
#utilityBarMenu ul { list-style: none; }
#navBarMenu a { color: #000000 }

.ddContent { position: absolute; background-color: #fff; border: 1px #efefef solid; border-radius: 5px; border-top-left-radius: 0; border-top-right-radius: 0; z-index: 15; width: 180px; font-size: .8rem; }
.ddContent li { margin: 0px; padding: 10px 10px; }
.ddContent li:hover { background-color: #efefef; cursor: pointer; }
.ddContent span { margin-right: 8px; }

#LogoutMenuBtn { margin-top: 2px; border-top: 1px solid #efefef; }

/* ==== mobile styling for Nav Bar ==== */
#navBarMobileBtn { position: absolute; right: 0; }
#navBarMobileBtn span { font-size: 25px; }

#mb-navBarMenu ul { list-style: none; margin: 0px auto 0px 20px; font-size: 1.2em; }
#mb-navBarMenu li { padding: 10px; }
#mb-navBarMenu li a { font-size: .8em; padding-left: 15px; }
#mb-navBarMenu li a span { padding-right: 10px; color: grey; }

#closeMenu { font-size: 24px; position: absolute; top: 25px; right: 35px; display: block; }
#accountDDContent { display: none; }

/* Mobile User Profile */
.mb-userProfile {
    background-color: var(--primary-color);
    color: white !important;
    border-radius: 8px;
    padding: 12px 15px !important;
    margin: 80px 20px 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mb-userProfile i {
    font-size: 24px;
}

.mb-userProfile span {
    font-size: 0.9em;
    font-weight: 500;
    color: white !important;
}

/* Mobile Menu Divider */
.mb-menu-divider {
    height: 1px;
    background-color: #d4d5d9;
    margin: 20px 20px;
}

/* Responsive styles for user profile */
@media (max-width: 768px) {
    #navBarUserProfile {
        display: none; /* Hide on mobile, show in mobile menu instead */
    }
}

@media (max-width: 480px) {
    #navBarUserProfile .user-display-name {
        max-width: 120px;
    }
}

/* ==================================
    Modal Pop-Up
===================================== */
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); justify-content: center; align-items: center; }
.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 28%; border-radius: 5px; }
.modal-close { float: right; }
.modal-close:hover, .modal-close:focus { color: #000; text-decoration: none; cursor: pointer; }
.modal-info { margin: 20px 50px 20px 50px }   
.SaveBtn { width:20%; }

#DocUpload { padding-top: 10px; background: none; border: none; box-shadow: none; padding: 0; }

/* ==================================
    Utility Bar
===================================== */
.utilityBarOption { font-size: 1em; color: white; }
.utilityBarOption:hover { text-decoration: underline; }

#utilityBarMenu { padding: 10px 0; z-index: 20; }
#utilityBarMenu span { color: white }
#utilityBarNav li { display: inline-block; }
#utilityBarMenu ul li ul li { display: block; }

/* ==================================
    Job Post (Job Details)
===================================== */
.jpHeader { margin-bottom: 15px; }
.jpTitle { margin: 25px 0 10px; }
.backArrow { margin-right: 5px; }
#backJobList { font-size: .9rem; margin-top: 15px; }
#backToMyInfo { font-size: .9rem; margin-top: 15px; }

.jpContent { padding: 20px 0 50px; border-top: 1px solid #efefef; }
.jpContentTitle { margin-bottom: 20px; }
.jpContentTitle h2 { margin-bottom: 5px; }

.jpContentDets { margin-bottom: 30px; }

.jpContentLeft { margin: 0 100px 0 0 ; width: 70% }
.jpContentLeft .jpContentDets h3 { border-top: 1px #efefef solid; border-bottom: 1px #efefef solid; padding: 10px 0 10px; font-size: 1.4em; }

.jpContentRight { font-size: .9em; min-width: 30%; }
.jpContentRight p { margin-bottom: 15px; }

#applyBtnContainer { width: 50%; margin: 0 auto 0 0; display: flex; flex-direction: column; gap: 10px; }
#applyBtn { width: 100%; margin: 25px 0 10px; }
#secApplyBtn { width: 100%; margin: 0 0 100px; }
#applyBtn a { color: #eeeeee }
#stickyApplyBtn { display: none; }

/* Apply button microcopy */
.apply-option { position: relative; }
.apply-microcopy {
    font-size: 0.85em;
    color: #666;
    margin: 8px 0 0 0;
    line-height: 1.4;
    text-align: center;
}

/* Hide microcopy on mobile */
@media (max-width: 768px) {
    .apply-microcopy { display: none; }
}

#noResults { width: 80%; margin: 4% auto; display: flex; flex-direction: column; align-items: center; }
#noResults p { font-size: 1.5em; }
#noResults #subHeading { margin-top: 15px; font-size: 1.2em; }

.job-description-content p, .job-description-content div { margin-bottom: 1em; }
.job-description-content ul, .job-description-content ol { margin-left: 10px; padding-left: 10px; list-style-position: outside; }
.job-description-content li { margin-bottom: 0.5em; list-style-type: disc; }

/* ==================================
    Personal Information Form
===================================== */
.formWrapper { padding-bottom: 20px; }
.formWrapper .flex-container { flex-direction: column; }
.infoCard { border: 1px solid #e9e9e9; border-radius: 10px; background: #efefef; margin-bottom: 20px; padding: 25px 0 10px; }
.formWrapper h3 { margin-bottom: 10px; }

#personalInfoSubmitBtn { margin-bottom: 30px; }
#personalInfoSubmitBtn button { width: 20%; }
@media (max-width: 1024px) { #personalInfoSubmitBtn button { width: 100%; } }

/* ==================================
    Multi-Step Wizard Styles
===================================== */
/* Wizard Container */
.wizard-container { position: relative; width: 100%; }

/* Breadcrumb Navigation */
.wizard-breadcrumb { display: flex; justify-content: space-between; align-items: center; margin: 30px 0 40px; padding: 0 10%; position: relative; }

.wizard-breadcrumb::before { content: ''; position: absolute; top: 20px; left: 10%; right: 10%; height: 2px; background: #e0e0e0; z-index: 0; }

.wizard-step-indicator { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; cursor: pointer; flex: 1; }

.wizard-step-circle { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid #e0e0e0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; color: #999; transition: all 0.3s ease; margin-bottom: 8px; }

.wizard-step-label { font-size: 12px; color: #666; text-align: center; max-width: 100px; line-height: 1.3; }

/* Active Step */
.wizard-step-indicator.active .wizard-step-circle { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

.wizard-step-indicator.active .wizard-step-label { color: var(--primary-color); font-weight: 600; }

/* Completed Step */
.wizard-step-indicator.completed .wizard-step-circle { background: #4caf50; border-color: #4caf50; color: #fff; }
/*.wizard-step-indicator.completed .wizard-step-circle::before { content: '✓'; font-size: 18px; }*/

.wizard-step-indicator.completed .wizard-step-label { color: #4caf50; }

/* Hover Effect for Clickable Steps */
.wizard-step-indicator.completed:hover .wizard-step-circle, .wizard-step-indicator.active:hover .wizard-step-circle { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

/* Wizard Step Content */
.wizard-step { display: none; }

.wizard-step.active { display: block; animation: fadeIn 0.3s ease-in; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Wizard Navigation Buttons */
.wizard-navigation { display: flex; justify-content: space-between; align-items: center; margin: 30px 0; gap: 15px; }

.wizard-nav-left { display: flex; align-items: center; }

.wizard-nav-right { display: flex; gap: 15px; align-items: center; }

.wizard-nav-right .btnBox { margin: 0; flex: none; min-width: 120px; }

.wizard-navigation .btnBox { margin: 0; flex: 1; max-width: 200px; }

.wizard-navigation .btnBox:only-child { margin-left: auto; }

.wizard-btn-prev, .wizard-btn-next { width: 100%; }

/* Cancel link styling */
.wizard-cancel-link { color: #666; text-decoration: none; font-size: 15px; padding: 10px 0; transition: color 0.2s ease; }
.wizard-cancel-link:hover { color: #333; text-decoration: underline; }
.wizard-cancel-link i { margin-right: 5px; }

/* Responsive Design */
@media (max-width: 768px) {
    .wizard-breadcrumb { padding: 0 5%; margin: 20px 0 30px; }

    .wizard-breadcrumb::before { left: 5%; right: 5%; }

    .wizard-step-circle { width: 35px; height: 35px; font-size: 14px; }

    .wizard-step-label { font-size: 10px; max-width: 70px; }

    .wizard-navigation .btnBox { max-width: none; }

    .wizard-nav-right { flex-direction: column; width: 100%; }

    .wizard-nav-right .btnBox { width: 100%; min-width: unset; }

    .wizard-navigation { flex-direction: column; gap: 20px; }

    .wizard-nav-left { order: 2; }

    .wizard-nav-right { order: 1; }
}

@media (max-width: 480px) {
    .wizard-breadcrumb { flex-wrap: nowrap; overflow-x: auto; padding: 0 2%; }

    .wizard-step-indicator { min-width: 60px; }

    .wizard-step-label { display: none; }
}

/* upload documents */
#fileInputsContainer { margin-top: 10px; }
#attachedFilesContainer { margin-top: 10px; }
#fileInputsContainer input[type="file"] { color: #9a9a9a0b; }
#fileInputsContainer input[type="file"]::file-selector-button { background-color: var(--primary-color); color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
#fileInputsContainer input[type="file"]::file-selector-button:hover { background-color: var(--hover-primary); }

.fileDisplay { margin-top: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 10px; background: white; }
.file-icon { font-size: 18px; margin-right: 7px; }
.fileName { font-size: 14px; }
.fileSize { font-size: 12px; color: #9a9a9a }
.fileRemove { font-size: 18px; color: crimson; float: right; }
.fileRemove:hover { font-weight: bold; }
.resume-icon { font-size:20px; margin-right:0px; }
#AdditionaDocumentsInfoBox { display: flex; justify-content: space-between; }

@media (min-width: 1024px) {
    .formWrapper .flex-container { flex-direction: row !important; }
    .cardCol-2 { width: 100%; }
}

@media (max-width: 1024px) { .cardCol-2 { width: 84%; } }

/* EEO Form */
#genderLabel, #ethnicityLabel, #veteranLabel, #disabilityLabel { font-size: 16px; font-weight: bold; color: black !important; }
#veteranLabel, #disabilityLabel { margin-top: 10px; }
#ethnicity { color: black; }
#EEOWrapper p b { font-size: 14px; margin: 10px 0 5px; }
#EEOWrapper .formBox { border-bottom: 1px solid #ccc; padding-bottom: 15px; }
#EEOWrapper .formBox select { max-width: 300px; }

.EEOsubheader { margin-bottom: 10px; font-size: 14px; }
.EEOtext { margin-bottom: 15px !important; font-size: 14px; }
.EEOlist { margin: 0 45px 15px; font-size: 14px; }  

#veteranDescList { margin: 0 45px; }
#veteranDescListChild { margin: 0 25px; }
#DisabilitySelfIdentificationTitle { margin-bottom:10px; }
#DisabilitySelfIdentificationTitle h4 { margin: 0; }
#DisabilitySelfIdentificationTitle p { font-size: 14px; }
#disabilityList { margin: 0 45px; }
                          
#disclaimer-wrapper p b { font-size: 14px; margin: 10px 0 5px; }
.disclaimer-subheader { margin-bottom: 10px; }
.disclaimer-text { margin-bottom: 10px !important; font-size: 14px; }
.disclaimer-list { margin: 0 45px 10px; font-size: 12px; } 

#VEVRAASelfIdentification, #DisabilitySelfIdentification { margin-bottom: 50px; }


/* ==================================
    Save and Confirmation
===================================== */
#appliedConfirm { width: 80%; margin:0 auto; display: flex; flex-direction: column; align-items: center; }
#appliedConfirm p { font-size: 1.5em; }
#appliedConfirm #subHeading { margin-top: 15px; font-size: 1.2em; }

/* Container for the cards */
.card-container { display: flex; flex-wrap: wrap; justify-content: center; padding: 50px; gap: 20px; }

/* Individual Card Styles */
.card { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 200px; height: 200px; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 15px; text-decoration: none; color: var(--primary-color); transition: background-color 0.3s ease, box-shadow 0.3s ease; }

/* Icon Styles */
.card .icon { font-size: 40px; margin-bottom: 15px; color: var(--primary-color); }

/* Text Styles */
.card span { font-size: 18px; text-align: center; padding: 0 10px; }

/* Hover Effects */
.card:hover { background-color: #f3f3f3; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }

/* Confirmation Page Styles */
.confirmation-quick-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 20px auto; max-width: 800px; padding: 15px; }
.confirmation-quick-links a { color: var(--primary-color); text-decoration: none; font-size: 1.05em; padding: 8px 15px; border-radius: 5px; transition: background-color 0.3s ease; }
.confirmation-quick-links a:hover { background-color: #f0f0f0; }
.confirmation-quick-links a i { margin-right: 5px; }
.confirmation-success-header { text-align: center; margin: 40px auto 30px; max-width: 800px; }
.confirmation-success-icon { font-size: 80px; color: #28a745; margin-bottom: 20px; }
.confirmation-success-header h2 { font-size: 2em; color: #333; margin-bottom: 10px; }
.confirmation-job-title { font-size: 1.3em; color: #666; margin-top: 10px; }
.confirmation-card { max-width: 800px; margin: 20px auto; padding: 25px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.confirmation-card h3 { font-size: 1.3em; color: var(--primary-color); margin-bottom: 15px; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; }
.confirmation-card h3 i { margin-right: 10px; }
.confirmation-details p { margin: 10px 0; font-size: 1.05em; line-height: 1.6; }
.confirmation-details strong { color: #333; font-weight: 600; }
.confirmation-list { list-style: none; padding-left: 0; margin: 15px 0; }
.confirmation-list li { padding: 10px 0 10px 30px; position: relative; font-size: 1.05em; line-height: 1.6; }
.confirmation-list li:before { content: "•"; position: absolute; left: 10px; color: var(--primary-color); font-size: 1.5em; line-height: 1; }
@media (max-width: 768px) { .confirmation-quick-links { flex-direction: column; align-items: center; gap: 10px; } .confirmation-quick-links a { width: 100%; text-align: center; } .confirmation-success-icon { font-size: 60px; } .confirmation-success-header h2 { font-size: 1.5em; } .confirmation-job-title { font-size: 1.1em; } .confirmation-card { margin: 15px 20px; padding: 20px; } }

/* ==================================
    Custom Table 
===================================== */
.tableHeader { background: var(--primary-color); }

/* ==================================
    Privacy Policy 
===================================== */
.section li{ list-style-position: inside; }
.section h2 { margin: 20px 0px 6px 0; }

/* ==================================
    Account Pages
===================================== */
.contentHeader { margin-bottom: 15px; }
.contentTitle { margin: 25px 0 10px; }

/* My Information */
.myInfoContent { margin-top: 25px; }
#MyInfoSubmitBtn { margin-bottom: 30px; }
#MyInfoSubmitBtn button { width: 20%; }
@media (max-width: 1024px) { #MyInfoSubmitBtn button { width: 100%; } }
.additionalInfo { padding-bottom:30px; }

/* ==================================
    Footer - Modern Minimal Design
===================================== */
footer {
    background: #1a1a1a;
    margin-top: auto;
}

.footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 1400px;
    margin: 0 auto;
}

.footer-nav {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    align-items: center;
}

.footer-nav-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: color 0.2s ease;
}

.footer-nav-link:hover {
    color: #ffffff;
}

.footer-social {
    display: flex;
    gap: 16px;
    align-items: center;
}

.footer-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.footer-social-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.footer-social-icon svg {
    width: 18px;
    height: 18px;
    fill: rgba(255, 255, 255, 0.7);
    transition: fill 0.2s ease;
}

.footer-social-icon:hover svg {
    fill: #ffffff;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-links {
    display: flex;
    gap: 24px;
    align-items: center;
}

.footer-bottom-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
}

.footer-bottom-link:hover {
    color: rgba(255, 255, 255, 0.9);
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .footer-main {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 24px;
        gap: 20px;
    }

    .footer-nav {
        gap: 20px;
        width: 100%;
    }

    .footer-social {
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        padding: 16px 24px;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 12px;
    }
}

/* ==========================================
        CUSTOM MEDIA QUERIES
============================================= */
@media (min-width: 1024px) { .contentWrapper { width: 80%; } }
@media (min-width: 1025px) { .contentWrapper { width: 75%; } }
@media (min-width: 1600px) { .contentWrapper { width: 70%; } }
@media (max-width: 1600px) { #advSearchBtn { margin-top: 15px; } }
@media(max-width: 1024px) { 
    #DocUpload { font-size: 1.2em; }
    .SaveBtn { width:35%; }
    .modal-info { margin: 20px 0px; }

}
@media (max-width: 769px) {
    .modal-content { width: 50%; }
    #DocUpload { text-align: center; }
    #searchBoxes { flex-direction: column; }
    #searchFormWrapper { border: none; }
    .searchBox { border-radius: 5px; margin: 0 0 10px; }
    .searchBox input[type="text"] { background: none; }
    #searchBtn-mb { display: block; width: 100%; margin-bottom: 10px; }
    #clearSearchBtn-mb { display: block !important; }
    #searchBtn { display: none; }
    #clearSearchBtn { display: none; }
    #advSearchContent .flex-container { display: flex !important; flex-direction: column; }
    body { background: white; }
    .jsListing .flexRight { margin: auto 0; }
    .jsListingBtn { margin-top: 0px; }
    #remove-filter-box { display: none; }

    .formBox.hasTwo .formBox { width: 100%; margin: 0px; }

    /* Mobile navbar adjustments */
    #navBarClient {
        padding: 10px 0;
    }

    #navBarLogo {
        max-width: 130px;
        height: auto;
        object-fit: contain;
    }

    #navBarLogo img {
        max-width: 130px;
        height: auto;
    }

    #navBarMenu { display: none; }
    #navBarMobileBtn { display: block; }
    #mb-navBarMenu { width: 70%; }

    /* Clear filters button mobile padding */
    #remove-filter-box {
        padding: 10px 16px;
    }
    .remove-filter {
        display: inline-block;
        padding: 8px 12px;
    }
    .modal-info { margin: 20px 0px 20px 0px; }
    .SaveBtn { margin-left:0px; }
    .docRowLeft { float: none; margin-bottom: 3px; width: 100%; }
    .docRowRight { float: none; margin-bottom: 9px; width: 100%; text-align: left; }
    .docRowCenter { float: none; margin-bottom: 3px; width: 100%; }
    #jsListContainer { position:relative; height: auto; }
    .pdf-drawer { width: 95%; }
    .pdf-drawer-header { flex-direction: column; gap: 10px; align-items: flex-start; }
    .pdf-controls { flex-wrap: wrap; width: 100%; }
}

@media (max-width: 480px) {
    .modal-content { width:80%; }
    #newDocBtn { position: revert; padding-bottom: 10px; }
    /*Job List Page*/
    #navBarMobileBtnSearch { display: block; }
    #closeMenuSearch { display: block; z-index: 200; }
    .contentWrapper { width: 92%; }
    .jsListing.flex-container { flex-direction: row; }
    /*Job Details Page*/
    .jpContent.flex-container { display: block; }
    .jpContentLeft { width: 100%; }
    #applyBtnContainer { display: none; }
    #stickyApplyBtn { position: fixed; bottom: 0; display: flex; }
    .table td { font-size: 13px; }
    table.actTable th { padding: 14px 10px 14px 15px; }
    table.actTable th a { font-size: 15px; }
    .SaveBtn { width: 50%; }
    .modal-card { width:100%; padding: 0px 12px; }
    #newDocBtn { top: 65px; }
    #uploadButton { font-size:12px; padding:10px 10px; }
    .cardCol-2 { width: 80%; }
    .flex-container { flex-direction: column; }
    .select-options { flex-direction: row; }
    #navWrapper { border-bottom: 1px solid #ccc; }
}

/* ==============================================
    COLLAPSIBLE DETAILS (USED FOR TCC CLIENTS)
================================================= */
.collapsible { background-color: #f3f5f9; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 1.2rem; margin-top: 20px; }
.collapsible:hover, .collapsible.active { background-color: #cccccc; }
.collapsible:active { background-color: #cccccc; }
.collapsible.active::after { content: "\2212"; }
.ColorLink { color: var(--primary-color); }
.collapsible:after { content: '\002B'; font-weight: bold; float: right; margin-left: 5px; }

/* Custom checkbox styles */
.custom-checkbox { display: flex; align-items: center; cursor: pointer; }
.custom-checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 3px; margin-right: 8px; position: relative; cursor: pointer; vertical-align: middle; }
.custom-checkbox input[type="checkbox"]:checked { background-color: var(--primary-color); border-color: var(--primary-color); }
.custom-checkbox input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.custom-checkbox label { display: inline; font-weight: normal; margin-bottom: 0; cursor: pointer; }

/* ==================================
    Map/List Header Styles
===================================== */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 20px 0;
    flex-wrap: wrap;
    gap: 10px;
}

.results-header h2 { margin: 0px; }

/* Cleaner, less intrusive toggle buttons */
.view-toggle-buttons {
    display: inline-flex;
    gap: 0;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.view-toggle-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #666;
    transition: all 0.2s ease;
    border-radius: 6px;
    font-weight: 500;
}

.view-toggle-btn:hover {
    color: #333;
    background: rgba(0,0,0,0.05);
}

.view-toggle-btn.active {
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.view-toggle-btn i {
    font-size: 16px;
}

/* Map container */
#mapContainer {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
    margin-top: 10px;
    margin-bottom: 50px;
}

#jobMap {
    width: 100%;
    height: 600px !important;
    min-height: 600px;
    position: relative;
    z-index: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .results-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .view-toggle-buttons {
        width: 100%;
        justify-content: center;
    }

    .view-toggle-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
    }

    #mapContainer {
        border-radius: 5px;
    }

    #jobMap {
        height: 400px !important;
        min-height: 400px;
    }
}

/* Tablet responsive */
@media (max-width: 1024px) and (min-width: 769px) {
    #jobMap {
        height: 500px !important;
        min-height: 500px;
    }
}
/* Map popup styling */
.leaflet-popup-content .job-popup { min-width: 200px; }
.leaflet-popup-content .job-popup h4 { margin: 0 0 8px 0; color: #646464; font-size: 16px; font-weight: 600; }
.leaflet-popup-content .job-popup p { margin: 0 0 8px 0; color: #666; font-size: 14px; }
.leaflet-popup-content .job-popup i { color: var(--primary-color); margin-right: 4px; }
.leaflet-popup-content .job-popup .txt-link { color: var(--primary-color); text-decoration: none; font-weight: 500; }
.leaflet-popup-content .job-popup .txt-link:hover { text-decoration: underline; }
/* Custom job marker styling */
.custom-job-marker { background-color: var(--primary-color); border: 2px solid white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3); position: relative; }
.custom-job-marker i { color: white; font-size: 14px; margin-left: 7.5px; margin-top: 7.5px; }
/* Clustered job marker styling */
.custom-job-cluster { background-color: var(--primary-color); border: 2px solid white; border-radius: 50%; width: 30px !important; height: 30px !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3); position: relative; }
.custom-job-cluster i { color: white; font-size: 14px; position: relative; top: 7.5px; left: 7.5px; }
.custom-job-cluster .job-count { position: absolute; top: -5px; right: -5px; background-color: #ff4444; color: white; border-radius: 50%; width: 15px; height: 15px; font-size: 10px; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 1px solid white; }
/* Cluster popup styling */
.cluster-popup .job-list { max-height: 200px; overflow-y: auto; margin-top: 10px; }
.cluster-popup .job-item { padding: 8px 0; border-bottom: 1px solid #eee; }
.cluster-popup .job-item:last-child { border-bottom: none; }
.cluster-popup .job-item p { font-weight: bold; color: #646464; font-size: 14px; }

.leaflet-control svg { display: none !important; }

/* Employment Section Buttons */
#addEmploymentBtn {
    background-color: #6c757d;
    color: white;
    border: 1px solid #6c757d;
    padding: 10px 20px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-block;
    width: auto;
}

#addEmploymentBtn:hover {
    background-color: #5a6268;
    border-color: #545b62;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#addEmploymentBtn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.removeEmploymentBtn {
    font-size: .8em;
    text-decoration: none !important;
    z-index: 10;
    transition: color 0.3s ease;
    padding: 5px 10px;
    border-radius: 3px;
}

.removeEmploymentBtn:hover {
    color: #0056b3 !important;
    text-decoration: none !important;
    background-color: #f0f0f0;
}

.removeEmploymentBtn:focus {
    outline: none;
}

.employment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin: 10px 30px 20px; 
}

.employment-header h4 {
    margin: 0;
}

.current-employment-label {
    margin: 0;
    font-weight: normal;
    font-size: 0.9em;
}

.employment-entry {
    position: relative;
}

#employmentContainer .infoCard { padding-top: 0px; }

.leaflet-control svg { display: none !important; }

/*Loading Spinner*/
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    /*backdrop-filter: blur(2px);*/
}

    .loading-overlay p {
        color: #d0d0d0;
        font-size: 14px;
        margin-top: 10px;
        position: relative;
        top: 50px;
    }

    .loading-overlay.active {
        display: flex;
    }

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: fixed;
}
.spinnerContent {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.jobSpinnerContent {
    position: absolute;
    top: 200px;
}

@media (max-width: 769px) {
    .jobSpinnerContent {
        top: 0;
        left: 40%;
    }
}

/* ==================================
    CANDIDATE SKILL STYLES
===================================== */
.skill-active-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    min-height: 80px;
    background: #efefef82;
    margin-bottom: 20px;
}

.skill-active {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: var(--primary-light);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
}

.skill-active-remove {
    cursor: pointer;
    color: var(--primary-color);
    transition: color 0.2s;
    font-size: 16px;
}

.skill-active-remove:hover {
    font-weight: bold;
}

.empty-skill-active {
    color: #999;
    font-style: italic;
}

.skill-item-clickable {
    cursor: pointer;
    transition: background-color 0.2s;
}

.skill-item-clickable:hover {
    background-color: #e8f5e9 !important;
}

.skill-item-hidden {
    display: none !important;
}

.skill-mt-30 {
    margin-top: 30px;
}

.skill-mt-40 {
    margin-top: 40px;
}

.skill-mr-15 {
    margin-right: 15px;
}

.skill-float-left {
    float: left;
}

.skill-inline-form {
    display: inline;
}

.skill-no-margin {
    margin: 0;
}

.skill-category-badge {
    font-size: 12px;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1px 5px;
    margin-left: 6px;
    background: transparent;
}

.skill-dropdown {
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.skill-filter-header {
    background-color: #efefef82;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.skill-toggle-icon {
    transition: transform 0.3s ease;
}

.skill-filter-content {
    display: none;
    background-color: #fff;
    padding: 12px 16px;
    max-height: 300px;
    overflow-y: auto;
}

.skill-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-list-item {
    margin-bottom: 6px;
}

.skill-item {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 14px;
    background-color: #f9f9f9;
}

.skill-item-plus {
    color: #28a745;
    font-weight: bold;
    margin-right: 6px;
}

/* Two-column layout */
.skills-two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}

.skills-left-column,
.skills-right-column {
    min-width: 0;
}

.skill-section {
    margin-bottom: 0;
}

.skill-form-buttons {
    margin-top: 20px;
}

/* Search bar styles */
.skill-search-container {
    position: relative;
    margin-bottom: 20px;
    margin-top: 15px;
    width: 100%;
    box-sizing: border-box;
}

.skill-search-input {
    width: 100%;
    padding: 10px 75px 10px 40px;
    border: 2px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.skill-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.skill-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

.skill-search-clear {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.2s;
    padding: 5px;
}

.skill-search-clear:hover {
    color: #333;
}

.skill-no-results {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    background-color: #f9f9f9;
    border: 2px dashed #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
}

.skill-no-results i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.skill-no-results p {
    margin: 0;
    font-size: 16px;
    font-style: italic;
}

/* Modal styles */
.skill-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

.skill-modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: skill-modal-slide-in 0.3s ease;
}

@keyframes skill-modal-slide-in {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.skill-modal-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

.skill-modal-content p {
    margin-bottom: 25px;
    color: #666;
    font-size: 15px;
}

.skill-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.skill-danger-btn {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.skill-danger-btn:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .skills-two-column-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .skills-right-column {
        order: -1;
    }

    .skill-modal-content {
        padding: 20px;
    }
}

/* ==================================
    PROFILE PAGE STYLES
===================================== */

/* Profile Navigation Links */
.profile-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.profile-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.profile-nav-link:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-nav-link i {
    font-size: 16px;
}

/* Profile Collapsible Sections */
.profile-collapsible-section {
    margin-top: 0;
    margin-bottom: 0;
    border-top: 2px solid #e0e0e0;
}

.profile-collapsible-section:first-of-type {
    border-top: none;
}

.profile-collapsible-section:last-of-type {
    margin-bottom: 30px;
    border-bottom: 2px solid #e0e0e0;
}

.profile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 18px 10px;
    user-select: none;
    transition: background-color 0.2s;
}

.profile-section-header:hover {
    background-color: #f9f9f9;
}

.profile-section-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.profile-toggle-icon {
    font-size: 20px;
    color: #666;
    transition: transform 0.3s ease;
}

.profile-section-content {
    display: none;
    padding: 15px 10px 20px 10px;
    border-top: 1px solid #f0f0f0;
}

/* Mobile responsive for profile nav */
@media (max-width: 768px) {
    .profile-nav-links {
        flex-direction: column;
        gap: 10px;
    }

    .profile-nav-link {
        width: 100%;
        justify-content: center;
    }
}

.jobs-overlay { display: none; position:absolute; top: 0; left: 0; width:100%; height: 100%; z-index: 1000; justify-content: center; align-items: center; flex-direction: column; text-align: center; }

.searchContent { position: absolute; top: 30%; left: 50%; }
.loader { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(0deg, #FFFFFF 50%, black 100%); animation: spin 1s linear infinite; }
.inner-circle { width: 90%; height: 90%; background-color: white; border-radius: 50%; }

/* ==================================
    JOB ALERT SUBSCRIPTION STYLES
===================================== */
.divider {
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
}

.margin-bottom-md {
    margin-bottom: 12px;
}

.margin-vertical-md {
    margin: 15px 0;
}

.search-disclaimer {
    margin-top: 20px;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.active-alert-label {
    color: var(--primary-color);
    font-weight: 500;
}

/* ==================================
    CANDIDATE ACTIVITY STYLES
===================================== */
.document-download-container {
    text-align: center;
    padding: 1em;
}

.document-download-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

.document-download-icon {
    font-size: 2em;
}

/* ==================================
    DROPZONE CUSTOM STYLES
===================================== */
.dropzone { border: 2px dashed #d4d5d9; border-radius: 5px; background: #fafafa; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; min-height: 150px; display: flex; align-items: center; justify-content: center; }
.dropzone:hover { border-color: var(--primary-color); background: #f5f5f5; }
.dropzone.dz-drag-hover { border-color: var(--primary-color); background: #e8f4f8; }

.dropzone .dz-message { margin: 0; font-size: 16px; color: #5c5c5c; font-weight: normal; }
.dropzone .dz-message i { font-size: 48px; color: var(--primary-color); display: block; margin-bottom: 10px; }

.dropzone .dz-preview .dz-remove { color: red; }
.dropzone .dz-preview .dz-progress { display: none; }
.dropzone .dz-preview.dz-file-preview .dz-image { background: var(--primary-light); border: 1px solid var(--primary-color); }


/* Dropzone in formBox */
.formBox .dropzone { margin-bottom: 0; }

/* Mobile responsive */
@media (max-width: 768px) {
    .dropzone { min-height: 120px; padding: 15px; }
    .dropzone .dz-message { font-size: 14px; }
    .dropzone .dz-message i { font-size: 36px; }
    .dropzone .dz-preview .dz-image { width: 80px; height: 80px; }
}

/* ==================================
    ADDRESS AUTOCOMPLETE STYLES
=====================================*/
.address-autocomplete-container {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #d4d5d9;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 2px;
    display: none;
}

.address-autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.address-autocomplete-item:last-child {
    border-bottom: none;
}

.address-autocomplete-item:hover,
.address-autocomplete-item.address-autocomplete-active {
    background-color: var(--primary-light);
}

.address-autocomplete-item strong {
    color: #333;
    font-weight: 500;
}

/* Ensure the formBox containing the address field has relative positioning */
.formBox {
    position: relative;
}

/* Application Summary Styles */
#application-summary {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

#application-summary h4 {
    margin-bottom: 10px;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

#application-summary h5 {
    color: var(--primary-color);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 600;
}

.summary-section {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.summary-section:last-child {
    border-bottom: none;
}

.summary-section p {
    margin: 8px 0;
    line-height: 1.6;
    color: #333;
}

.summary-section strong {
    color: #000;
    font-weight: 600;
}

.summary-section em {
    color: #666;
    font-style: italic;
}

.summary-list { margin-left:25px; }