@font-face {
    font-family: "Satoshi";
    src: local("Satoshi"), local("Satoshi-Regular");
    font-weight: 400;
    font-style: normal;
}

:root {
    --layout-header-bg:  #3428c9;
    --layout-bg: #fff;
    --page-header-bg: #3428c9;
    --page-header-color: white;
    --page-bg: #fff;
    --searchbox-bg: #fff;
    --joblist-card-bg: fff;
    --button-bg: #3428c9;
    --button-text-color: #fff;
    --JobName-header: black;
    --messaget-bg: #f6ded8;
    --messaget-text-color: #5a5a5a;
    --messaget-border-color: #5a5a5a;
    --jo-jobtitle-name: #3428c9;
    --tag-border: rgba(184,33,50,0.5);
    --tag-bg: #fff;
    --tag-font-color: #3428c9;
    --jd-tag-bg: #fff;
    --jd-tag-font-color: #595959;
    --grid-bg: #3428c9;
    --grid-border-color: #fce4ec;
    --grid-cell-color: white;
    --grid-altrow-bg: #fff;
    --grid-header-bg: #3428c9;
    --grid-header-color: white;
    --profile-header-bg: #3428c9;
	--layout-JobListing-header-bg: #fff;
	--layout-JobListing-header-btn-bg: #3428c9;
}


/*:root {
    --layout-header-bg: #d9534f;
    --layout-bg: #f6ded8;
    --page-header-bg: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
    --page-bg: #fffaf9;
    --searchbox-bg: #fffaf9;
    --joblist-card-bg: rgba(246,222,216,0.4);
    --tag-border: rgba(184,33,50,0.5);
    --tag-bg: #fff;
    --tag-font-color: #93BD57;
    --button-bg: #b82132;
    --button-text-color: #fff;
    --JobName-header: black;
    --messaget-bg: #f6ded8;
    --messaget-text-color: #5a5a5a;
}*/


/* ==========================================
       GLOBAL FONT OVERRIDE - Single Font Name
       ========================================== */
:root {
    /* Change font name here ONLY */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Base font for body */
body, html {
    font-family: var(--font-family) !important;
}

/* All text elements - exclude icons and checkboxes */
div:not([class*="fa"]):not([class*="e-icon"]):not(.e-frame):not(.e-checkbox-wrapper),
span:not([class*="fa"]):not([class*="e-icon"]):not(.e-icons):not(.e-frame):not(.e-check):not(.e-label),
p, a,
label:not(.e-label),
button,
input:not([type="checkbox"]):not(.e-checkselect),
textarea,
select,
td:not(.e-gridchkbox),
th,
li, ul, ol,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family) !important;
}

/* Syncfusion components - exclude icons and checkboxes */
.e-grid:not(.e-checkbox-wrapper),
.e-gridheader,
.e-gridcontent,
.e-rowcell:not(.e-gridchkbox),
.e-headercell,
.e-headercelldiv,
.e-breadcrumb {
    font-family: var(--font-family) !important;
}

/* Modals - exclude icons */
.modal,
.modal-title,
.modal-body,
.modal-header,
.modalCancel {
    font-family: var(--font-family) !important;
}

/* Preserve Font Awesome icons */
i[class*="fa"],
[class*="fa-"],
.fa, .fas, .far, .fal, .fab,
i.fa::before {
    font-family: 'FontAwesome' !important;
}

/* Preserve Syncfusion icons and checkboxes */
[class*="e-icon"],
.e-icons,
.e-frame,
.e-check,
.e-label,
.e-checkbox-wrapper,
.e-checkbox-wrapper *,
.e-checkselect,
span.e-frame,
span.e-icons,
span.e-check,
span.e-label,
i[class*="e-"] {
    font-family: 'e-icons' !important;
}


/* Prevent page scroll */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Prevent body scroll */
    background: var(--layout-bg) !important;
    font-family: "Satoshi",Helvetica,Arial,sans-serif;
    color: #333;
}

/* Fixed header panel */
#headerpanel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--layout-bg); /* Match page background */
    padding: 10px 20px;
    height: 50px; /* Fixed height for logo */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Main content area - scrollable */
.main-content-wrapper {
    flex: 1;
   /* padding: 6px; */
    overflow-y: auto; /* Allow content to scroll */
    overflow-x: hidden;
    height: 100%;
}

.container.body-content {
    height: calc(100vh - 180px); /* content area scroll only */
    overflow-y: auto;
}

/* Fixed site header */
.site-header {
    position: fixed;
    top: 60px; /* adjust based on #headerpanel height */
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    background: var(--layout-header-bg);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    box-shadow: 0 3px 5px rgba(0,0,0,.2);
}

/* Fixed breadcrumb */
.breadcrumb-wrapper {
    position: fixed;
    top: 100px; /* adjust based on header heights */
    left: 0;
    right: 0;
    z-index: 998;
    width: 100%;
    padding: 5px 2px;
    background: var(--layout-bg);
}

/* Layout container with scrollable content */
.layout-container {
    position: fixed;
    top: 135px; /* adjust based on header + breadcrumb heights */
    left: 0;
    right: 0;
    bottom: 38px; /* leave space for footer */
    display: flex;
    overflow: hidden;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    padding-left: 2px !important;
    padding-right: 2px !important;
}
/* Sidebar remains scrollable */
/* Sidebar remains scrollable */
.left-sidebar {
    width: 220px;
    background: white;
    padding: 0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    position: relative;
    transition: width 0.3s ease;
    overflow: visible;
    border-radius: 12px;
    margin: 5px;
    display: flex;
    flex-direction: column;
   /* height: 100%;*/
}

/* Main content area - scrollable */
.main-content-wrapper {
    flex: 1;
    padding: 6px;
    overflow-y: auto; /* Allow content to scroll */
    overflow-x: hidden;
    height: 100%;
}

/* Container body content */
.container.body-content {
    height: auto; /* Remove fixed height */
    overflow-y: visible; /* Allow natural flow */
}

/* Fixed footer */
footer.Footer,
.full-width-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 997;
    width: 100%;
    margin: 0;
    padding: 7px 20px;
    background: #fff;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

.logo {
    height: 50px;
    object-fit: contain;
    display: block;
}

.site-header .logo {
    height: 40px;
    width: auto;
}

.header-actions {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.small-note {
    color: #fff;
    opacity: .9;
    font-size: .85rem;
    margin-right: .6rem;
}

.btn-register,
.btn-login {
    display: flex;
    align-items: center;
    gap: 6px; /* space between icon & text */
    padding: 6px 16px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    background: #3428c9;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
}

    .btn-register .btn-icon,
    .btn-login .btn-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }



/* Frame container */
.frame-wrap {
    max-width: 100%; /* visually similar to your screenshot */
/*    margin: 2px auto;
    padding: 2px;*/
}

/* Outer panel (white) */
.panel {
    background: var(--page-bg);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0,0,0,.12);
}

.e-grid .e-table {
    background-color: var(--page-bg) !important;
}

.panel-top {
    background: var(--page-header-bg);
    color: #fff;
    padding: 10px 26px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    font-family: "Satoshi-Black", Helvetica;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .panel-top h2 {
        font-family: "Satoshi-Black", Helvetica;
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: .6px;
    }

.required-text {
    font-family: "Satoshi-Regular", Helvetica;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: #fff;
    opacity: 0.9;
}

    .required-text .asterisk {
        color: white;
        margin-right: 3px;
        font-weight: bold;
    }

/* Search area (inside white portion under red bar) */
.search-area {
    padding: 5px 1px 6px;
    background: var(--searchbox-bg);
    border-bottom: 1px solid rgba(238,206,203,0.6);
}

/*.search-input {
    height: 52px;
    border-radius: 8px;
    border: 1px solid #eececb;
    background: #fff;
    padding: 0 14px;
    font-weight: 500;
    color: #666;
}*/

.btn-search {
    height: 52px;
    border-radius: 8px;
    background: var(--layout-header-bg);
    color: #fff;
    border: 0;
    font-weight: 700;
    padding: 0 18px;
}

/* jobs list */
.jobs-list {
    padding: 10px 16px 30px
}

/*.job-card {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    background: var(--joblist-card-bg);
    border-radius: 10px;
    border: 1px solid rgba(238,206,203,0.8);
    padding: 18px;
    margin-bottom: 22px;
    box-shadow: 3px 3px 9px rgba(0,0,0,0.12);
}*/

.job-card {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start; /* Changed from center */
    background: var(--joblist-card-bg);
    border-radius: 10px;
    border: 1px solid rgba(238,206,203,0.8);
    /*padding: 18px;*/
    margin-bottom: 22px;
    box-shadow: 3px 3px 9px rgba(0,0,0,0.12);
    min-height: auto; /* Remove fixed height */
    /*height:100px;*/
}


.job-image {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    object-fit: cover;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
}

.job-main {
    flex: 1 1 55%;
    min-width: 200px;
    padding-left: 8px;
}


/* When no logo is shown */
.job-summary-text.no-logo {
    padding-left: 0;
}

.job-tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--tag-border);
    background: var(--tag-bg);
    /*font-weight: 700;*/
    font-size: 12px !important;
    color: var(--tag-font-color);
    /*font-size: 14px;*/
}

.job-meta {
    margin-top: 10px;
    color: #8b8b8b;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px
}

.job-badges {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px
}

.badge-j {
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px;
    display: inline-block
}

.badge-part {
    background: #fef9c3;
    border: 1px solid #eececb;
    color: #b26d2d
}

.badge-full {
    background: #dcfce7;
    border: 1px solid #b6e2c5;
    color: #637446
}

/* salary block aligned right on md+ */
.job-salary {
    flex: 0 0 180px;
    text-align: right;
    min-width: 140px;
}

.salary-amount {
    font-size: 44px;
    font-weight: 800;
    color: #595959;
    line-height: 1
}

.salary-label {
    color: #595959;
    font-weight: 600;
    font-size: 15px;
    margin-top: 6px
}

/* small image icons in meta */
.meta-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: .95
}

/* Footer */
footer.site-footer {
    background: transparent;
    padding: 18px 26px;
    margin-top: 18px;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

    footer.site-footer small {
        color: #8b8b8b
    }

/* thin rounded scrollbar for matching design (WebKit) */
::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: #3428c9;
    border-radius: 20px
}

/* Responsive behavior: mobile stack (M1) */
@media (max-width:767.98px) {
  /*  .frame-wrap {
        padding-left: 16px;
        padding-right: 16px
    } */

    .job-card {
        flex-direction: column;
        align-items: flex-start
    }

    .job-salary {
        text-align: left;
        width: 100%;
        order: 4;
        padding-left: 8px
    }

    .job-main {
        order: 2;
        padding-left: 0
    }

    .job-image {
        width: 86px;
        height: 86px
    }
}

/* tablet tweaks */
@media (min-width:768px) and (max-width:991.98px) {
    .job-salary {
        flex-basis: 160px
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 100% !important;
    }
}

.outline.form-control {
    font-size: 12px !important;
    /*line-height: 48px !important;*/
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.job-grid-wrapper {
    /*padding: 10px;*/
}

/*.job-card {
    display: flex;
    gap: 15px;
    padding: 0px;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.06);
    height: 120px !important;
}
*/
.job-left {
    width: 80px;
    text-align: -webkit-center;
}

.job-img {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    object-fit: cover;
}

.job-right {
    flex: 1;
    margin-left: 10px;
}

.job-title {
    font-size: 1.5vw !important;
    font-weight: bold;
    color: var(--jo-jobtitle-name);
    margin-bottom: 15px;
    margin-top: 15px;
    max-width: 70ch;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

    /* Only apply line-height when text wraps */
    .job-title.wrapped {
        line-height: 1.0 !important;
    }

    .job-title.wrapped .job-title-link {
        line-height: 1.0 !important;
    }

.job-title-link {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    display: inline;
}

.job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 12px;
}

.tag {
    padding: 10px 10px;
    /*background: #FBEFEB;*/
    border: 1px solid var(--tag-border);
    border-radius: 10px;
}

    /* DEFAULT (for other types) */
    .tag.type {
        background: var(--tag-bg);
        border: 1px solid var(--tag-border); /* darker border */
        color: var(--tag-font-color);
    }

        /* FULL TIME */
        .tag.type[data-schedule="Full Time"] {
            background: var(--tag-bg); /* light blue */
            border: 1px solid var(--tag-border); /* darker blue border */
            color: var(--tag-font-color);
        }

        /* PART TIME */
        .tag.type[data-schedule="Part Time"] {
            background: var(--tag-bg); /* light yellow */
            border: 1px solid var(--tag-border); /* darker yellow border */
            color: var(--tag-font-color);
        }


.job-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.salary {
    font-size: 24px;
    font-weight: bold;
}

/* Top row: Schedule left, Salary right */
/* Job Title and Schedule in same row */
.title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* Salary aligned right */
.salary-block {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    margin-bottom: 8px;
}

.salary {
    font-size: 16px;
}

.permonth {
    font-size: 14px;
    opacity: 0.8;
}

/* Tags left + Posted right */
.job-tags-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.job-tags {
    display: flex;
    gap: 6px;
}

.posted {
    white-space: nowrap;
    font-size: 14px;
    color: #666;
}

.icon::before {
    background-image: url('/DMCandidatePortal/Images/Posted.svg');
}

.job-tags .tag {
    padding-left: 24px; /* space for icon */
    position: relative;
    display: inline-block;
}

    .job-tags .tag::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 4px;
        width: 13px;
        height: 13px;
        transform: translateY(-50%);
        background-size: contain;
        background-repeat: no-repeat;
    }

.postedIcon {
    position: relative;
    padding-left: 24px; /* space for icon */
    white-space: nowrap;
    font-size: 12px;
    color: #666;
}

    .postedIcon::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 17px;
        height: 17px;
        transform: translateY(-50%);
        background-image: url('/DMCandidatePortal/Images/calendar.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }

.tag.schedule.type {
    position: relative;
    padding-left: 24px; /* space for icon */
}

    .tag.schedule.type::before {
        content: ""; /* REQUIRED */
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 17px; /* icon size */
        height: 17px; /* icon size */
        background-image: url('/DMCandidatePortal/Images/parttime.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }

.title-with-icon {
    position: relative;
    padding-left: 30px; /* space for icon */
    display: flex; /* align icon + text vertically */
    align-items: center; /* perfect middle alignment */
    min-height: 24px; /* matches icon height */
    font-weight: bold;
    font-size: 16px;
}

    .title-with-icon::before {
        content: "";
        position: absolute;
        left: 0;
        width: 20px;
        height: 20px;
        /*background-image: url('/Images/JobOpportunities.svg');*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .title-with-icon.JobOpportunities::before {
        background-image: url('/DMCandidatePortal/Images/JobOpportunities.svg');
    }

	.title-with-icon.RecommendedJobs:before {
		content: "\f005"; /* star */
		font-family: FontAwesome;
		margin-right: 3px;
	}
	

	.title-with-icon.Profile::before {
    content: "\f007";
    font-family: FontAwesome;
    margin-right: 3px;
	}

	.title-with-icon.Interview::before {
		content: "\f086"; /* fa-comments */
		font-family: FontAwesome;
		margin-right: 3px;
	}

	   .title-with-icon.JobApplication::before {
		content: "\f03a"; /* fa-list */
		font-family: FontAwesome;
		margin-right: 3px;
	}

	.title-with-icon.Feedback::before {
		content: "\f0e5"; /* fa-comment */
		font-family: FontAwesome;
		margin-right: 3px;
	}

	.title-with-icon.UploadDocument::before {
		content: "\f093"; /* fa-upload */
		font-family: FontAwesome;
		margin-right: 3px;
	}

    .title-with-icon.jobdetails::before {
        background-image: url('/DMCandidatePortal/Images/jobdetails.svg');
    }

    .title-with-icon.applyjobs::before {
        background-image: url('/DMCandidatePortal/Images/applyjobs.svg');
    }


/* Header layout */
.jobs-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom:10px;
}

/* Job found text with icon */
.job-found {
    position: relative;
    padding-left: 28px; /* space for icon */
    font-size: 12px;
}

    /* Icon before text */
    .job-found::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 20px;
        height: 20px;
        transform: translateY(-50%);
        background-image: url('/DMCandidatePortal/Images/JobFound.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }

.job-preferences {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* push all to right */
    gap: 10px; /* space between 3 columns */
    margin-left: auto;
}

.btn-sort {
    background: transparent;
    border: 1px solid #ccc;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

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

    .btn-sort:hover {
        background-color: #f5f5f5;
    }


.tag.company::before {
    background-image: url('/DMCandidatePortal/Images/company.svg');
}

.tag.location::before {
    background-image: url('/DMCandidatePortal/Images/location.svg');
}

.tag.workdays::before {
    background-image: url('/DMCandidatePortal/Images/calendar.svg');
}

.tag.schedule::before {
    background-image: url('/DMCandidatePortal/Images/days.svg');
}

#TemplateGrid.e-grid {
    border: none !important;
    background-color: fff;
}

#TemplateGrid .e-gridcontent,
#TemplateGrid .e-content,
#TemplateGrid .e-gridheader {
    border: none !important;
    background-color: #f6ded8 !important;
}

.e-grid .e-table {
    background-color: fff;
}

.e-grid .e-summaryrow .e-summarycell, .e-grid .e-summaryrow .e-templatecell, .e-grid .e-summarycontent .e-indentcell, .e-grid .e-indentcell.e-detailindentcelltop, .e-grid .e-groupfooterrow.e-summaryrow .e-indentcell.e-indentcelltop {
    background-color: var(--page-bg) !important;
    border-color: var(--page-bg) !important;
    color: rgba(0,0,0,.54)
}

.e-grid .e-rowcell, .e-grid .e-groupcaption, .e-grid .e-indentcell, .e-grid .e-recordplusexpand, .e-grid .e-recordpluscollapse, .e-grid .e-rowdragdropcell, .e-grid .e-detailrowcollapse, .e-grid .e-detailrowexpand, .e-grid .e-detailindentcell, .e-grid .e-detailcell {
    border-color: var(--page-bg) !important;
}

.e-grid.e-default .e-grouptopleftcell {
    border-color: var(--page-bg) !important;
}

.e-grid td.e-active {
    background: #fff; !important;
    color: #000
}

#TemplateGrid .e-focused {
    box-shadow: none !important;
    outline: none !important;
}

#TemplateGrid .e-grid .e-rowcell:focus,
#TemplateGrid .e-grid .e-row:focus {
    outline: none !important;
    box-shadow: none !important;
}

#TemplateGrid .e-row:hover,
#TemplateGrid .e-rowcell:hover {
    background-color: transparent !important;
}

#TemplateGrid .e-rowcell {
    background: none !important;
}

#TemplateGrid .e-gridcontent,
#TemplateGrid .e-row {
    background: transparent !important;
}

.job-title-link {
    color: inherit; /* keep parent color */
    /*text-decoration: none;*/ /* remove underline */
}

    .job-title-link:hover {
        color: blue;
    }

.job-title-Details {
    color: var(--JobName-header);
    font-weight: 700;
    font-size: 2.5vw !important;
    margin: 4px 0;
    /*margin-left: 12px;*/
}

.ref-text {
    font-weight: 400 !important;
    /* or 300 for even lighter */
    opacity: 0.8; /* optional softer look */
}

.jobs-tags {
    padding: 5px 5px 5px 5px;
}


.tagJobDetails {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 4px;
    /*border: 1px solid var(--tag-border);*/
    font-size: 12px !important;
    color: var(--jd-tag-font-color);
    background: var(--jd-tag-bg);
}

.tagJobDetails.company::before {
    background-image: url('/DMCandidatePortal/Images/company.svg');
}

.tagJobDetails.location::before {
    background-image: url('/DMCandidatePortal/Images/location.svg');
}

.tagJobDetails.workdays::before {
    background-image: url('/DMCandidatePortal/Images/calendar.svg');
}

.jobdetails-tags .tagJobDetails {
    padding-left: 24px; /* space for icon */
    position: relative;
    display: inline-block;
}

    .jobdetails-tags .tagJobDetails::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 4px;
        width: 13px;
        height: 13px;
        transform: translateY(-50%);
        background-size: contain;
        background-repeat: no-repeat;
    }

.jobdetails-tags {
    display: flex;
    gap: 6px;
    margin-left: 15px;
    margin-bottom: 20px;
}

.html-viewer {
    max-height: calc(100vh - 320px); /* set height you want */
    overflow-y: auto; /* vertical scrollbar */
    overflow-x: hidden; /* hide horizontal scroll (optional) */
    padding: 10px;
    /*border: 1px solid #ddd;*/
    background: #fff;
    border-radius: 6px;
    background-color: var(--page-bg) !important;
}

    .html-viewer * {
        color: #61635a !important;
    }

    .html-viewer p,
    .html-viewer ul,
    .html-viewer li {
        background-color: var(--page-bg) !important;
    }


.left-section {
    padding-right: 20px;
}

.right-section {
    background: var(--page-bg);
    /*border-left: 1px solid #ddd;*/
    padding: 20px;
}

.sidebar-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e1e1e1;
}


.job-overview-card {
    background: var(--layout-bg);
    border-radius: 20px;
    padding: 20px;
}

.overview-title {
    font-weight: 600;
    color: #3d3d3d;
}

.overview-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 12px;
}

.icon {
    font-size: 22px;
    color: #d9534f;
    margin-top: 3px;
}

.item-label {
    font-size: 14px;
    font-weight: 600;
    color: #515151;
}

.item-value {
    font-size: 14px;
    color: #7a7a7a;
}

.btn:hover {
    color: #fff;
    background-color: var(--button-bg);
    border-color: var(--button-bg);
    box-shadow: 0 1px 5px rgba(0,0,0,0.06);
    color: var(--button-text-color);
}

.btn-apply {
    background: var(--button-bg) !important;
    color: var(--button-text-color) !important;
    font-weight: 600;
    border-radius: 10px;
    padding: 10px;
    color: var(--button-text-color);
}

    .btn-apply.Jobs {
        width: 160px !important;
    }

.btn-back {
    background: #c92a2a;
    color: #fff;
    border: 1px solid #c92a2a;
    font-weight: 600;
    border-radius: 10px;
    padding: 10px;
}

    .btn-back.Jobs {
        width: 160px !important;
    }

.button-center {
    display: flex;
    justify-content: center; /* center horizontally */
    align-items: center;
    gap: 20px; /* spacing between buttons */
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}


.btn-back:hover,
.btn-apply:hover {
    opacity: 0.85;
}

/* Dropdown */
.learn-job-select {
    border: 1px solid #f0c9c9;
    background: #fff7f7;
    color: #444;
    border-radius: 8px;
    padding: 8px 10px;
    width: 100%; /* increased full width */
    max-width: 320px; /* adjust as per design */
}

/* Message box design */
.message-box {
    background: var(--messaget-bg);
    border: 1px solid var(--messaget-border-color);
    padding: 25px;
    border-radius: 12px;
    color: var(--messaget-text-color);
    line-height: 1.6;
    font-size: 15px;
    margin: 20px 40px; /* added 20px margin */
}



/* Right column wrapper */
.job-end {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-right: 15px;
}

/* Right meta block */
.job-meta-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    text-align: right;
}


/* Salary block */
.job-salary-block {
    /*display: flex;*/
    text-align: right;
    gap: 8px;
    min-width: 150px;
}

/* ---------- MOBILE VIEW FIX ---------- */
/* MOBILE FIX — force vertical stacking inside Syncfusion Grid */
@media (max-width: 767px) {

    .job-right {
        flex: 1;
        margin-left: 0px !important;
    }

    .job-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        height: auto !important; /* OVERRIDE your fixed height */
        padding: 15px !important;
        width: 100% !important; /* Force full width inside grid */
    }

    /* Company Logo */
    .job-left {
        width: 100% !important;
        text-align: left !important;
    }

    .job-img {
        width: 60px !important;
        height: 60px !important;
    }

 	/* Job Title */
    .job-title {
        font-size: 3.8vw !important;
        margin-top: 10px !important;
        margin-bottom: 6px !important;
		max-width:30ch !important;
    }

	/* Salary block */
	.job-salary-block {
		/*display: flex;*/
		text-align: left !important;
	 
	}
	
	.salarydescription{
		max-width:30ch !important;
		margin-top: 15px !important;
		text-align:left !important;
		 word-wrap: break-word;
		overflow-wrap: break-word;
		white-space: normal;
	}

    .job-title-Details {
        color: var(--JobName-header);
        font-weight: 700;
        font-size: 5vw !important;
        margin: 4px 0;
        /*margin-left: 12px;*/
    }

    .job-title-applyjob {
        color: var(--JobName-header);
        font-weight: 700;
        font-size: 2.5vw !important;
        margin: 4px 0;
        margin-left: 12px;
    }

    .job-summary {
        margin-top: 6px;
        font-size: 14px;
        color: #555; /* lighter */
        line-height: 1.4;
    }


    .ref-text {
        font-weight: 400 !important;
        /* or 300 for even lighter */
        opacity: 0.8; /* optional softer look */
    }


    /* TAGS block */
    .job-tags {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Right side (job-type + posted date + salary) */
    .job-end {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    .job-meta-right {
        align-items: flex-start !important;
        width: 100%;
    }

    .job-salary-block {
        justify-content: flex-start !important;
        width: 100% !important;
        margin-top: 12px;
    }

    .salary {
        font-size: 18px !important;
    }

    .permonth {
        font-size: 12px !important;
    }

    .job-meta-right {
        margin-bottom: 8px !important; /* spacing before salary */
    }

        .job-meta-right .tag.schedule.type {
            margin-top: 0 !important;
            margin-bottom: 6px !important;
        }

    .postedIcon {
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }
}


/* MOBILE VIEW — hide text, show icon only */
@media (max-width: 767px) {
    .btn-register .btn-text,
    .btn-login .btn-text {
        display: none !important;
    }

	 /* 
    .small-note {
        display: none !important; /* hide Already Registered on mobile */
    }*/

    .btn-register,
    .btn-login {
        padding: 6px 10px !important; /* smaller buttons */
     /*   width: 44px !important;  perfect round-ish buttons */
        justify-content: center;
    }
        .btn-register .btn-icon,
        .btn-login .btn-icon {
            width: 22px !important;
            height: 22px !important;
        }
}

/* DESKTOP VIEW — normal full text & icon */
@media (min-width: 768px) {
    .btn-text {
        display: inline-block;
    }
}


.user-greeting {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.user-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-icon {
    width: 18px;
    height: 18px;
    opacity: 0.95;
}

.user-text {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}



.footer-bar {
    width: 100%;
    background: #111; /* black background */
    color: #fff; /* white text */
    padding: 10px 20px;
    position: relative;
    bottom: 0;
    font-size: 14px;
}

    .footer-bar a {
        color: #fff;
        margin-left: 20px;
        text-decoration: none;
    }

        .footer-bar a:hover {
            text-decoration: underline;
        }

.footer-text {
    white-space: nowrap;
}

.footer-links {
    white-space: nowrap;
}


.btn-login-Login {
    background-color: var(--button-bg) !important;
    color: var(--button-text-color) !important;
    /*width: 30%;*/
    /*max-width: 300px;*/
    font-size: 1rem;
    border-radius: 4px;
    border: none;
    padding: 12px;
    margin-top: 20px;
    font-size: 1.0rem;
    cursor: pointer;
    font-weight: bold;
}

.btn-login:hover {
    background-color: var(--button-bg);
    color: var(--button-text-color);
}

input,
select,
textarea {
    max-width: 100%;
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #ccc !important; /* optional */
    border: 0px;
    color: #666; /* optional */
}




.main-menu-bar {
    background: #f4dcd2;
    border-top: 1px solid #e1bfb5;
    border-bottom: 1px solid #e1bfb5;
    width: 100%;
}

    .main-menu-bar ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        width: 100%;
    }

        .main-menu-bar ul li {
            flex: 1; /* 🔥 Equal width across the whole row */
            text-align: center;
            padding: 5px 0; /* 🔥 Reduced height */
            border-right: 1px solid #e1bfb5;
            cursor: pointer;
        }

            .main-menu-bar ul li:last-child {
                border-right: none;
            }

            .main-menu-bar ul li a {
                text-decoration: none;
                font-size: 14px; /* 🔥 Slightly smaller text */
                font-weight: 600;
                color: #8b3e3e;
                display: block; /* full clickable area */
                width: 100%;
            }

            .main-menu-bar ul li.active {
                background: white;
                border-bottom: 3px solid #c62828;
            }

                .main-menu-bar ul li.active a {
                    color: #c62828;
                }

.menu li.active a {
    background: #fff;
    border-bottom: 3px solid #d15b55;
    font-weight: 600;
}

/* 🔹 MOBILE FIXES */
@media (max-width: 768px) {

    .main-menu-bar ul {
        flex-wrap: nowrap; /* allow horizontal scroll */
    }

    .main-menu-bar li {
        flex: 0 0 auto; /* auto width tabs */
    }

    .main-menu-bar a {
        padding: 10px 14px;
        font-size: 14px;
    }
}




/* ------------------ GRID LAYOUT ------------------ */

.dashboard-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 20px;
    padding: 10px;
}

/* ------------------ CARDS ------------------ */

.dashboard-card {
    background:var(--layout-bg);
    /*padding: 18px;*/
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    border: 1px solid #f2d8d8;
}

/* ------------------ SECTION TITLES ------------------ */

.section-title {
    border-radius: 20px 20px 0px 0px;
    background: var(--layout-header-bg);
    font-size: 14px;
     font-weight: 700; 
    color: #B71C1C;
    margin-bottom: 10px;
    padding: 10px 15px;
    color: #ffff;
    padding-top: 10px;
}

/* ------------------ ROW TEMPLATE ------------------ */

.custom-row {
    background: #fff;
    border: 1px solid #ebd4d4;
    padding: 12px 16px;
    border-radius: 14px;
    margin: 6px 5px;
    display: flex;
    flex-direction: column;
    min-width: 350px;
}

.row-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 3px;
}

.row-sub {
    font-size: 12px;
    color: #777;
    margin-bottom: 2px;
}

.row-status {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
    width: fit-content;
}

    .row-status.Applied {
        color: #C62828;
        background: #ffebeb;
    }

    .row-status.Invited {
        color: #6A1B9A;
        background: #f3e3ff;
    }



/* Prevent toolbar overlap */
/* Calendar Container */
.e-schedule {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .e-schedule .e-toolbar-item.e-today {
        display: none !important;
    }


    /* Toolbar Styling */
    div.e-schedule > .e-toolbar,
    .e-schedule .e-toolbar {
        /*background: linear-gradient(135deg, #c62828 0%, #e53935 100%) !important;*/
        border-radius: 12px 12px 0 0 !important;
        border: none !important;
        margin-bottom: 0 !important;
        /*padding: 16px 20px !important;*/
        flex-wrap: wrap !important;
    }

    /* Toolbar Items */
    .e-schedule .e-toolbar-items .e-toolbar-item {
        margin-right: 8px !important;
        white-space: nowrap !important;
    }

    /* Navigation Buttons */
    .e-schedule .e-toolbar .e-navigation .e-btn {
        background: rgba(255, 255, 255, 0.2) !important;
        border: none !important;
        color: white !important;
        border-radius: 6px !important;
        /*padding: 6px 12px !important;*/
        min-width: 32px !important;
        transition: background 0.3s ease;
    }


.e-schedule .e-toolbar .e-navigation .e-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}


    /* Date Range Text */
    .e-schedule .e-toolbar .e-date-range {
        min-width: 200px !important;
        display: inline-block !important;
        text-align: center !important;
        color: white !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        overflow: hidden !important;
    }

    /* View Switching Buttons (Day/Week/Month) */
    .e-schedule .e-toolbar .e-views .e-btn {
        background: rgba(255, 255, 255, 0.2) !important;
        border: none !important;
        color: white !important;
        border-radius: 6px !important;
        /*padding: 8px 16px !important;*/
        margin: 0 4px !important;
        transition: all 0.3s ease;
    }

        .e-schedule .e-toolbar .e-views .e-btn:hover {
            background: rgba(255, 255, 255, 0.3) !important;
        }

        .e-schedule .e-toolbar .e-views .e-btn.e-active {
            background: white !important;
            color: #c62828 !important;
            font-weight: 600;
        }

    /* Today Button */
    .e-schedule .e-toolbar .e-today .e-btn {
        background: rgba(255, 255, 255, 0.2) !important;
        border: none !important;
        color: white !important;
        border-radius: 6px !important;
        padding: 8px 16px !important;
        transition: background 0.3s ease;
    }

        .e-schedule .e-toolbar .e-today .e-btn:hover {
            background: rgba(255, 255, 255, 0.3) !important;
        }

    /* Calendar Header (Day Names) */
    .e-schedule .e-header-cells,
    .e-schedule .e-date-header-container .e-header-cells {
        background: #ffecec !important;
        color: #666 !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        font-size: 11px !important;
        padding: 12px 8px !important;
        border: none !important;
    }

    /* Calendar Cells */
    .e-schedule .e-work-cells,
    .e-schedule .e-date-header-wrap .e-date-header {
        background: #fff5f5 !important;
        border: 1px solid #ffe0e0 !important;
        transition: background 0.2s ease;
    }

        .e-schedule .e-work-cells:hover {
            background: #ffecec !important;
        }

    /* Current Date */
    .e-schedule .e-current-date {
        background: #c62828 !important;
        color: white !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
    }

    /* Selected Date */
    .e-schedule .e-selected-cell {
        background: #ffcdd2 !important;
        /*border: 2px solid #c62828 !important;*/
    }

    /* Month View Cell Numbers */
    .e-schedule .e-date-header .e-navigate {
        color: #333 !important;
        font-weight: 500 !important;
    }

    .e-schedule .e-current-date .e-navigate {
        color: white !important;
    }

    /* Other Month Dates */
    .e-schedule .e-other-month {
        opacity: 0.4 !important;
    }

    /* Events/Appointments */
    .e-schedule .e-appointment {
        background: #c62828 !important;
        border: none !important;
        border-radius: 6px !important;
        color: white !important;
    }

    /* Week View Specific */
    .e-schedule.e-device .e-week-view .e-work-cells,
    .e-schedule .e-week-view .e-work-cells {
        height: 80px !important;
    }

    /* Scrollbar Styling */
    .e-schedule .e-content-wrap::-webkit-scrollbar {
        width: 8px;
    }

    .e-schedule .e-content-wrap::-webkit-scrollbar-track {
        background: #ffecec;
    }

    .e-schedule .e-content-wrap::-webkit-scrollbar-thumb {
        background: #c62828;
        border-radius: 4px;
    }

        .e-schedule .e-content-wrap::-webkit-scrollbar-thumb:hover {
            background: #b71c1c;
        }

/* Responsive adjustments */
@media (max-width: 768px) {
    .e-schedule .e-toolbar {
        padding: 12px 16px !important;
    }

        .e-schedule .e-toolbar .e-date-range {
            font-size: 14px !important;
            min-width: 150px !important;
        }

        .e-schedule .e-toolbar .e-views .e-btn,
        .e-schedule .e-toolbar .e-today .e-btn {
            padding: 6px 12px !important;
            font-size: 13px !important;
        }

    .btn-more {
        padding: 8px 24px;
        font-size: 13px;
    }
}



/* More Button */
.more-button-container {
    text-align: center;
    padding: 15px 0 10px 0;
    background: var(--page-bg);
}

.btn-more {
    background: #C62828;
    color: #fff;
    border: none;
    border-radius: 15px;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(198, 40, 40, 0.2);
}

    .btn-more:hover {
        background: #b71c1c;
        box-shadow: 0 4px 8px rgba(198, 40, 40, 0.3);
        transform: translateY(-1px);
    }

    .btn-more:active {
        transform: translateY(0);
    }


#HistoryGrid .e-gridcontent,
#HistoryGrid .e-content,
#HistoryGrid .e-gridheader {
    border: none !important;
    background-color: var(--page-bg) !important;
}



/* ⭐ New: Full-width + vertical center */
.fullscreen-center {
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center; /* vertical center */
    min-height: 60vh; /* full screen height */
    width: 100%; /* full width */
    padding: 20px 0; /* optional spacing */
    box-sizing: border-box;
}
/* Title bar */
/*.panel-top {
    background: #d9534f;
    padding: 15px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}*/

/*.panel-centre {
    position: fixed;*/ /* stay fixed inside the viewport */
    /*top: 0;
    left: 0;
    width: 99vw;*/ /* full width of window */
    /*height: 70vh;*/ /* full height of window */

    /*display: flex;
    justify-content: center;*/ /* horizontal center */
    /*align-items: center;*/ /* vertical center */
    /*padding: 20px;*/
    /*box-sizing: border-box;
    background: var(--page-bg);*/ /* optional */
    /*margin-top: 190px;
    margin-left: 7px;
}*/

.panel-centre {
    position: fixed; /* stay fixed inside the viewport */
    top: 0;
    left: 0;
    width: 100vw; /* full width of window */
    height: 80vh; /* full height of window */
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center; /* vertical center */
    /*padding: 20px;*/
    box-sizing: border-box;
    background: var(--page-bg); /* optional */
    margin-top: 160px;
    margin-left: 2px;
}

.question-buttons {
    display: flex;
    justify-content: space-between; /* left & right */
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

    .question-buttons .btn-apply {
        min-width: 120px; /* keeps size uniform */
    }


.error-text {
    color: red;
    font-size: 14px;
    margin-bottom: 10px;
    padding-left: 4px;
}



.profile_card_header {
    background-color: lightblue;
    padding: 10px;
    font-weight:600;
}

.profile_group_bg {
    background-color: lightblue;
    padding: 10px;
}

.hide-important {
    display: none !important;
}

.e-grid .e-gridheader {
    padding-right: 0 !important;
}

.defaultheader {
    background-color: var(--profile-header-bg) !important; /*My profile header background color*/
    color: white; /*My profile header font color*/
    font-weight: bold;
    padding: 7px 1px 11px;
    margin-top: 5px !important;
    font-family: 'gotham_roundedbook' !important;
}


/* Grid container styling */
.custom-grid {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    /* Header styling */
    .custom-grid .e-gridheader {
        background-color: var(--grid-header-bg) !important;
        color: var(--grid-header-color) !important;
    }

        .custom-grid .e-gridheader .e-headercell {
            background-color: var(--grid-header-bg) !important;
            color: var(--grid-header-color) !important;
            font-weight: 500;
            padding: 14px 12px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .custom-grid .e-gridheader .e-headercelldiv {
            color: var(--grid-header-color) !important;
            font-size: 14px;
        }

        .custom-grid .e-gridheader .e-sortfilterdiv .e-icon-ascending,
        .custom-grid .e-gridheader .e-sortfilterdiv .e-icon-descending {
            color: var(--grid-header-color) !important;
        }

    /* Row styling */
    .custom-grid .e-row {
        background-color: var(--joblist-card-bg) !important;
        border-bottom: 1px solid var(--grid-border-color);
        font-size: 15px;
    }

        .custom-grid .e-row:hover {
            background-color: var(--grid-border-color) !important;
        }

        .custom-grid .e-row .e-rowcell {
            padding: 14px 12px;
            color: var(--grid-cell-color);
            font-size: 14px;
            border-right: 1px solid var(--grid-border-color);
        }

    /* Alternating row color (optional) */
    .custom-grid .e-altrow {
        background-color: #fff; !important;
        font-size: 15px;
    }

    /* Job Title link styling */
    .custom-grid .job-title-link {
        color: var(--jo-jobtitle-name);
        text-decoration: underline;
        font-weight: 500;
        cursor: pointer;
    }

        .custom-grid .job-title-link:hover {
            color: var(--jo-jobtitle-name);
        }

    /* Pager styling */
    .custom-grid .e-gridpager {
        background-color: #fff; !important;
        border-top: 1px solid var(--grid-border-color);
        padding: 10px;
    }

        .custom-grid .e-gridpager .e-pagercontainer {
            background-color: transparent !important;
        }

    /* Remove default borders */
    .custom-grid .e-gridcontent {
        border: none !important;
    }




/* Loading Overlay */
.loading {
    position: fixed !important;
    z-index: 10000 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(90, 90, 90, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .loading[style*="display: none"] {
        display: none !important;
    }

.CenterAligns {
    z-index: 10001;
    width: 150px;
    height: 150px;
    background-color: white;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    font-size: 15px;
    color: black;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.LoadImage {
    width: 100px;
    height: 100px;
}



.e-pager .e-currentitem {
    border: 0px !important;
}

    .e-pager .e-currentitem, .e-pager .e-currentitem:hover {
        background: var(--layout-header-bg) !important;
    }

.hideButton{
    display:none;
}

.btn-loginbutton {
    width: 100%;
    background: var(--button-bg) !important;
    color: var(--button-text-color) !important;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-loginbutton:hover {
    background: var(--button-bg) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

	.title-with-icon.Requests::before {
		content: "\f5fd";              /* fa-tasks */
		font-family: "Font Awesome 5 Free";
		font-weight: 900;              /* solid (fas) */
		display: inline-block;
		margin-right: 6px;
		font-size: 16px;
		line-height: 1;
		vertical-align: middle;
	}
	
/* =============================================
   BANNER — fixed, full width, very top, auto height
============================================= */
#divBanner {
    position: fixed;

    left: 0;
    width: 100%;
    z-index: 1004;
    line-height: 0;
}

#divBanner #siteBanner img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}