.job_listing {
    background-color: #D0D3D4;
    border: 1px silver solid;
    padding-left: 15px;
    padding-right: 15px;
}

.job_exp {
    cursor: pointer;
    padding-left: 25px;
    border: 1px silver solid;
    background-color: #2c5697;
    color: white;
}
a.job_exp:hover{
    color: #69b3e7;
}

.blue_line {
    border-top: 2px solid #2c5697;
}

table.sortable tbody tr:nth-child(2n) td {
    background: gainsboro;
}
table.sortable tbody tr:nth-child(2n+1) td {
    background: white;
}
table.sortable th {
    cursor: pointer;
}

.usertbl {
    /*font-size: small;*/
    width: 100%;
}
.usertbl th {
    text-align: center;
}
.usertbl td {
    vertical-align: top;
    padding: 5px;
    border: 1px #2c5697 solid;
}

.hide_td {
    display: none;
}

.content_tr {
    background-color: #c1e2b3;
}
.content_td {
    max-width: 500px;
    max-height: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#checkuserid {
    color: red;
    padding-left: 10px;
    display: none;
}
#checkemail {
    color: red;
    padding-left: 10px;
    display: none;
}

/* --------------------------------------------------------------------------
   FORM LAYOUT (no Bootstrap needed)
   -------------------------------------------------------------------------- */

/* Manual 3-column form row */
#manageform .form-row-3{
    display: flex !important;
    gap: 22px !important;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 14px;
}
#manageform .form-row-3 > .form-col{
    flex: 1 1 0;
    min-width: 0;
}

/* Full-width submit button (styled) */
#manageform input[type="submit"],
#manageform button[type="submit"]{
    width: 100% !important;
    display: block;
    background: #2c5697;
    color: #fff;
    border: 1px solid #2c5697;
    padding: 14px 18px;
    border-radius: 6px;
    cursor: pointer;
}
#manageform input[type="submit"]:hover,
#manageform button[type="submit"]:hover{
    filter: brightness(0.95);
}
#manageform input[type="submit"]:active,
#manageform button[type="submit"]:active{
    filter: brightness(0.9);
    transform: translateY(1px);
}
#manageform input[type="submit"]:disabled,
#manageform button[type="submit"]:disabled{
    background: #cfcfcf;
    border-color: #cfcfcf;
    color: #666;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* --------------------------------------------------------------------------
   FIX: form feels "too wide" inside cc-narrow
   -------------------------------------------------------------------------- */
.cc-narrow #manageform{
    padding: 0 16px;
}

/* --------------------------------------------------------------------------
   FILE UPLOAD ROWS: make them same height as text inputs + sane widths
   -------------------------------------------------------------------------- */

/* Adjust these 3 values if you want tighter/looser sizing */
:root{
    --ctl-h: 36px;     /* control height (match your normal inputs) */
    --addon-w: 44px;   /* left icon block width */
    --btn-w: 110px;    /* Browse button width */
}

/* Keep vertical rhythm consistent */
#manageform .form-group{
    margin-bottom: 14px !important;
}

/* Make input-group act like a single tight control */
#manageform .input-group{
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
}

/* Left icon block */
#manageform .input-group .input-group-addon{
    flex: 0 0 var(--addon-w);
    height: var(--ctl-h) !important;
    min-height: var(--ctl-h) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    text-align: center;
}

/* Middle "fake input" field */
#manageform .input-group .form-control{
    flex: 1 1 auto;

    height: var(--ctl-h) !important;
    min-height: var(--ctl-h) !important;
    line-height: var(--ctl-h) !important;

    padding: 0 14px !important;
}

/* Right button wrapper and button */
#manageform .input-group .input-group-btn{
    flex: 0 0 var(--btn-w);
}
#manageform .input-group .input-group-btn .btn{
    width: 100%;

    height: var(--ctl-h) !important;
    min-height: var(--ctl-h) !important;
    line-height: var(--ctl-h) !important;

    padding: 0 12px !important;  /* kills tall look */
}

/* Neutralize any input-lg inflation inside input groups */
#manageform .input-group .input-lg{
    height: var(--ctl-h) !important;
    min-height: var(--ctl-h) !important;
    line-height: var(--ctl-h) !important;

    font-size: inherit !important;
    padding: 0 14px !important;
}

/* Normalize icons so they don't stretch the row visually */
#manageform .input-group i,
#manageform .input-group .glyphicon{
    font-size: 16px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}
/* -----------------------------------------------------------
   Light blue input background (match Contact-Us)
   ----------------------------------------------------------- */
#manageform input[type="text"],
#manageform input[type="email"],
#manageform input[type="tel"],
#manageform input[type="url"],
#manageform input[type="search"],
#manageform input[type="number"],
#manageform input[type="password"],
#manageform select,
#manageform textarea{
    background: #f5f8ff !important;
}

/* File upload: make the middle "fake input" light blue too */
#manageform .input-group .form-control[disabled]{
    background: #f5f8ff !important;
    color: inherit;
    opacity: 1; /* some themes gray disabled inputs; this keeps it readable */
}

/* Keep the left file icon area gray */
#manageform .input-group .input-group-addon{
    background: #eee !important; /* adjust if your current gray is different */
    color: inherit;
}

/* Autofill override (Chrome/Edge/Safari) */
#manageform input:-webkit-autofill,
#manageform input:-webkit-autofill:hover,
#manageform input:-webkit-autofill:focus,
#manageform textarea:-webkit-autofill,
#manageform textarea:-webkit-autofill:hover,
#manageform textarea:-webkit-autofill:focus,
#manageform select:-webkit-autofill,
#manageform select:-webkit-autofill:hover,
#manageform select:-webkit-autofill:focus{
    -webkit-text-fill-color: inherit;
    -webkit-box-shadow: 0 0 0 1000px #f5f8ff inset;
    box-shadow: 0 0 0 1000px #f5f8ff inset;
    transition: background-color 9999s ease-in-out 0s;
}
/* --- How to Apply card --- */
.apply-card{
    border: 1px solid rgba(44,86,151,.45);
    border-radius: 10px;
    padding: 18px 20px;
    background: #fff;
    margin: 18px 0 18px;
}

.apply-card h2{
    margin: 0 0 12px;
}

.apply-steps{
    margin: 0;
    padding-left: 22px; /* keeps numbering aligned nicely */
}

.apply-steps li{
    margin: 8px 0;
}

/* Downloads: make them obvious */
.apply-downloads{
    display: inline-flex;
    gap: 10px;
    margin-left: 10px;
    vertical-align: middle;
    flex-wrap: wrap;
}

.dl-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.15);
    text-decoration: none;
    font-weight: 600;
    background: #f5f8ff; /* matches your light blue inputs */
    color: #2c5697;
}

.dl-btn:hover{
    filter: brightness(.97);
    text-decoration: none;
}

.dl-btn i{
    font-size: 1.1em;
}

/* Optional: color hint per file type */
.dl-word i{ color: #185ABD; } /* Word-ish blue */
.dl-pdf  i{ color: #C81E1E; } /* PDF red */

/* Note row */
.apply-note{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,.08);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(0,0,0,.75);
}

.apply-note i{
    margin-top: 2px;
    color: #2c5697;
}
/* -------------------------------
   Job listing cards (new vibe)
-------------------------------- */
.job-card{
    margin: 18px 0;
}

.job-card__inner{
    background: #fff;
    border: 1px solid rgba(44, 86, 151, 0.22);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

/* Title + meta */
.job-card__header{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.job-card__title{
    margin: 0;
    font-size: 1.35em;
    line-height: 1.2;
}

.job-card__meta{
    font-size: 0.95em;
    color: rgba(0,0,0,0.65);
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.job-card__meta i{
    color: #2c5697;
}

/* Content spacing inside the job body */
.job-card__body p{
    margin: 10px 0;
}
.job-card__body ul{
    margin: 10px 0;
    padding-left: 22px;
}
.job-card__body li{
    margin: 6px 0;
}

/* Optional: make block quotes / italics calmer */
.job-card__body i,
.job-card__body em{
    color: rgba(0,0,0,0.75);
}

/* Keep your Show More / Show Less link consistent */
a.job_exp{
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(44, 86, 151, 0.25);
    background: #f5f8ff;
    color: #2c5697;
    text-decoration: none;
    font-weight: 600;
}
a.job_exp:hover{
    filter: brightness(.98);
    color: #2c5697;
}
/* Distinguish the "How to Apply" card as an info panel */
.apply-card{
    background: #f5f8ff; /* light blue tint */
    border: 1px solid rgba(44,86,151,.35);
    box-shadow: none;    /* flatter than job cards */
}

.apply-card h2{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Make the download buttons stand out a bit more inside the tinted panel */
.apply-card .dl-btn{
    background: #fff;
    border-color: rgba(44,86,151,.25);
}
/* =========================================================
   Careers page typography: inherit site font, no bold
   Scoped to the careers content area you already have
   ========================================================= */

#main_body .content{
    font-family: inherit;
    font-weight: 400;
}

/* Remove bold everywhere inside this page content */
#main_body .content h1,
#main_body .content h2,
#main_body .content h3,
#main_body .content h4,
#main_body .content h5,
#main_body .content h6,
#main_body .content strong,
#main_body .content b,
#main_body .content label,
#main_body .content .dl-btn,
#main_body .content .job-card__title,
#main_body .content .apply-note,
#main_body .content .job-card__meta{
    font-weight: 400 !important;
}

/* Keep headings large but normal weight (match global sizing) */
#main_body .content h1{ font-size: xx-large; }
#main_body .content h2{ font-size: x-large; }
#main_body .content h3{ font-size: larger; }
#main_body .content h4{ font-size: large; }

/* Form labels: slightly larger, still not bold */
#main_body .content #manageform label{
    font-size: 1.05em;
    font-weight: 400 !important;
}

/* Required mark stays red without bold */
#main_body .content .required{
    font-weight: 400 !important;
    color: #c10000;
}
/* Ensure collapsed content doesn’t bleed into other cards */
.job-card__body{
    overflow: hidden;
}

/* Keep the Show More button from drifting oddly */
.job-card__body + .readmore-js-toggle,
.readmore-js-toggle{
    display: inline-block;
    margin-top: 10px;
}
/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px){
    #manageform .form-row-3{
        display: block !important;
    }
    #manageform .form-row-3 > .form-col{
        width: 100% !important;
        margin-bottom: 14px;
    }

    /* Let Browse button breathe on small screens */
    :root{
        --btn-w: 120px;
    }
}