body {
background: #f7f8fb;
}
.section{padding:22px 0}
.card {
background: #fff;
border: 1px solid #1118271f;
border-radius: 16px;
box-shadow: 0 10px 26px rgba(0,0,0,.08);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 10px;
}
.topbar{
background:#111; color:#fff;
border-bottom:1px solid rgba(255,255,255,.12);
}
.topbar .row{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:10px 0;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:950;}
.brand a{color:#fff; text-decoration:none}
.nav{display:none;}
.sub{margin:0; color:var(--lc-muted); line-height:1.55}
.metaRow{
display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.pill{
display:inline-flex; align-items:center; gap:.4rem;
border:1px solid rgb(17 24 39 / 12%); background:#fff; border-radius:999px;
padding:7px 10px; font-size:12.5px; color:var(--lc-muted);
white-space:nowrap;
}
/* Layout */
.grid{
display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; align-items:start;
}
@media (max-width: 980px){ .grid{grid-template-columns:1fr;} }
/* Filters */
.filters{padding:14px 14px 10px}
.filters .row{display:flex; gap:10px; flex-wrap:wrap}
.filters input{
flex:1 1 230px;
padding:11px 12px;
border-radius:12px;
border:1px solid var(--lc-line);
font-size:14px;
outline:none;
background:#fff;
}
.filters input:focus{
border-color: rgba(49,126,229,.55);
box-shadow:0 0 0 4px rgba(49,126,229,.12);
}
.filters .btn2{
padding:11px 12px;
border-radius:12px;
border:1px solid rgba(49,126,229,.22);
background:#317EE5;
color:#fff;
font-weight:950;
cursor:pointer;
font-size:14px;
white-space:nowrap;
}
.filters .btn2:hover{background:var(--lc-primary-dark)}
.filters .note{margin-top:8px; font-size:12.5px; color:var(--lc-muted2)}
/* Results list */
.resultsWrap{padding:14px}
.resultsHeader{
display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
margin-bottom:10px;
}
.count{font-weight:950}
.sort{font-size:12.5px; color:var(--lc-muted2)}
.jobList{display:flex; flex-direction:column; gap:10px}
.job{
border:1px solid var(--lc-line);
border-radius:14px;
background:#fff;
padding:12px;
}
.jobTop{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.jobTitle{font-weight:950; margin:0 0 4px; font-size:14px}
.jobOrg{margin:0; color:var(--lc-muted); font-size:13px}
.jobMeta{margin-top:8px; display:flex; flex-wrap:wrap; gap:8px}
.tag {
font-size: 12px;
color: #4b5563;
border: 1px solid #1118271f;
background: #fff;
border-radius: 999px;
padding: 5px 8px;
white-space: nowrap;
}
.jobDesc{margin:8px 0 0; color:#4b5563; font-size:13px; }
/* Blur / lock overlay */
.large {
font-size: 14px;
}
.largest{
font-size: 14px !important;
}
.lockCard{
max-width:520px;
width:100%;
border-radius:16px;
border:1px solid rgba(49,126,229,.25);
background:#fff;
box-shadow:0 12px 30px rgba(0,0,0,.12);
padding:16px;
text-align:left;
}
.lockCard h2{
margin:0 0 8px;
font-size:18px;
letter-spacing:-.01em;
}
.lockCard p{margin:0 0 12px; color:var(--lc-muted); font-size:13.5px; line-height:1.55}
.ctaRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.ctaRow .btnPrimary{
flex:1 1 220px;
padding:12px 14px;
border-radius:12px;
border:1px solid rgba(49,126,229,.22);
background:#317EE5;
color:#fff;
font-weight:950;
cursor:pointer;
font-size:14px;
text-align:center;
}
.ctaRow .btnPrimary:hover{background:var(--lc-primary-dark)}
.ctaRow .btnGhost{
flex:1 1 180px;
padding:12px 14px;
border-radius:12px;
border:1px solid rgba(49,126,229,.35);
background:#fff;
color:var(--lc-primary-dark);
font-weight:950;
cursor:pointer;
font-size:14px;
text-align:center;
}
.ctaRow .btnGhost:hover{background:rgba(49,126,229,.06)}
.micro{
margin-top:10px;
font-size:12.5px;
color:var(--lc-muted2);
line-height:1.5;
}
.micro b{color:var(--lc-ink)}
.trustRow{
margin-top:10px;
font-size:12.5px;
color:var(--lc-muted2);
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}
input[type="email"], input[type="text"] {
flex: 1 1 240px;
padding: 12px 12px;
border-radius: 12px !important;
border: 1px solid rgba(17,24,39,.12);
font-size: 14px;
outline: none;
background: #fff;
}
.sliding-location {
flex: 1 1 240px;
padding: 12px 12px 12px 42px;
border-radius: 12px !important;
border: 1px solid rgba(17,24,39,.12);
font-size: 14px;
outline: none;
background: #fff;
}
.input-group .input-group-text {
padding: .75rem .875rem;
}
/* Right rail */
.rail{  position: sticky; top: 10px; }
.rail h3{ }
.rail p{ font-size: 1rem;}
.rail .box{
border:1px solid rgb(17 24 39 / 12%);
border-radius:14px;
background:#fff;
padding:20px;
margin-bottom:10px;
}
.rail .kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.rail .kpi {
border: 1px solid #1118271f;
border-radius: 14px;
background: #fff;
padding: 10px 12px;
}
.rail .kpi .v{font-weight:950; color:#317EE5}
.rail .kpi .k{font-size:12.5px; color:var(--lc-muted)}
.featured-card-apply-buttons{
display: none !important;
}
.featured-card-thumb {
display: none;
}
.featured-card-footer {
padding: 0px !important;
}
.tab-buttons{
font-size: 12px;
color: #4b5563;
border: 1px solid #1118271f;
background: #fff;
border-radius: 999px;
padding: 5px 8px;
white-space: nowrap;
}
.job {
border: 1px solid #1118271f;
border-radius: 14px;
background: #fff;
padding: 12px;
position: relative;
}
.featured-card-subtitle {
font-size: 14px;
}
.meta-tags {
gap: 12px 0px;
}
.company-detail {
display: flex !important;
margin: 0;
max-width: 100%;
}
.refinement-fiter {
border-top: 1px solid #1118271f;
padding-top: 1.5rem;
margin-top: .5rem;
}
.refinement-fiter .refinement-style .dropdown-toggle {
flex: 1 1 240px;
padding: 12px 12px;
border-radius: 12px !important;
border: 1px solid rgba(17,24,39,.12);
font-size: 14px;
outline: none;
background: #fff;
line-height: 1.56;
}
.refinement-fiter .refinement-style .btn {
padding: .5rem 1rem;
}
@media (min-width: 992px) {
.refinement-fiter .min-width {
min-width: 33.33%;
max-width: 33.33%;
}
}
.share-links a {
width: 1.5rem;
height: 1.5rem;
display: block;
fill: #317EE5;
}
.share-links a svg {
height: 100%;
width: 100%;
display: block;
}
.jobtagbtn a {background-color: rgba(49, 126, 229, 0.1)!important;
color: #317EE5!important;font-weight: bold;}
.numofpages ~ .create-job-alert {
padding-top: 0 !important;
}
.lc-spin-loader{
display: none;
width:35px;
height:35px;
border:6px solid #ddd;
border-top:6px solid #3498db;
border-radius:50%;
animation:spin 1s linear infinite;
margin: 0 auto;
margin-top:    20px;
}
@keyframes spin{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}