/* ------------ VARIABLES ------------ */
:root{
  /* COLORS */
  --Accent: #ff9900;
  --Accent-transparent: #ff990010;
  --dark-color: #0d0d0d;
  --dark-icon-color: #fff;
	--dark-border: #1c1c1c;
  --light-color: #ff9900;
  --light-icon-color: #fcb632;
	--light-p: #363636;
	--light-p-shadow: #E6E6E6;
	--dark-page-background: #1c1c1c;
	--table-even: #bbbbbb2e;
	--table-even-border: #ffffff20;
	--table-odd: #ffffff12;
	--table-odd-border: #ffffff20;
	--dark-table-even: #26262670;
	--dark-table-odd: #1a1a1a50;
	--dark-p: #c1bbb7;
	--dark-filter-text: #737373;
	--dark-p-shadow: #212121;
	--dark-h1: #F8F9F9;
	--light-h1: #fff;
	--dark-h2: #b8b8b8;
	--light-h2: #555555;
	--dark-h3: #b5b5b5;
	--section-bg: #f8fafc;
	--section-border: #e2e8f0;
	--tag-button-bg: #d7d7d7;
	--tag-button-text: #4d4d4d;
	--active-job-last-date-color: green;
	--expire-job-last-date-color: red;
	--expiring-today-job-last-date-color: #ff5722;
	--designation-tag-color: #c2e3fd;
	--active-designation-tag-color: #ffc107;
	--important-note-bg:#aaffaa2a;
	--important-note-br:#aaeeaa9a;
}
body.darkmode {
	--table-even: #26262670;		
	--table-odd: #1a1a1a50;
	--section-bg: ##0e0e0e50;
	--section-border: #1c1c1c;
	--tag-button-bg: #232323;
	--tag-button-text: silver;
	--light-p: #c1bbb7;
	--light-p-shadow: #212121;
	--active-job-last-date-color: lightgreen;
	--expiring-today-job-last-date-color: orange;
	--designation-tag-color: #898989;
	}
.section {background: var(--section-bg); border: 1px solid var(--section-border); margin: 20px 0 20px 0;}
body.darkmode{	background-color: var(--dark-color)!important; }
			  :has(.SinglePostContainer, .joblist) .Active, .job-expiry.Active {color: var(--active-job-last-date-color);}
			  :has(.SinglePostContainer, .joblist) .Today, .job-expiry.Today {color: var(--expiring-today-job-last-date-color);}
			  :has(.SinglePostContainer, .joblist) .Expired, .job-expiry.Expired {color: var(--expire-job-last-date-color); }

			  .jobleaf .Active { color: green;  text-shadow: 0 0 10px green; }
		      .jobleaf .Expired {color: #b90a0a; text-shadow: 0 0 10px red; }

/* -------------- BUTTON -------------- */
.tag-button {background: var(--tag-button-bg); color: var(--tag-button-text);}
.btn{ background-color: #fff; width: 3.5em; height: 2em; border-radius: 1em; padding: 2px ; top: 0px; 
  box-shadow: inset 0 2px 10px rgba(0,0,0, .1),
              inset 0 2px 2px rgba(0,0,0, .1),
              inset 0 -2px 2px rgba(0,0,0, .1);
  position: relative; display: flex; align-items: center;  cursor: pointer; }

.btn__indicator{ background-color: #fff; width: 1.8em; height: 1.8em; border-radius: 50%; border: solid 1px rgba(255,255,255, .3);
position: absolute; box-shadow: 0 2px 10px rgba(0,0,0, .2); transition: transform .3s ease; }

.btn__icon-container{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.btn__icon{ color: var(--light-icon-color); font-size: 1rem; }
.darkmode .btn{ box-shadow: inset 0 2px 10px rgba(0,0,0, .3),  inset 2px 0 2px rgba(0,0,0, .3), inset 0 -2px 2px rgba(0,0,0, .3); }
.darkmode .btn__indicator{ transform: translatex(1.5em); background-color: var(--dark-color); box-shadow: 0 2px 10px rgba(0,0,0, .3); }
.darkmode .btn__icon{ color: var(--dark-icon-color); }

/* -------------- ANIMATION ------------ */
.btn__icon.animated{ animation: spin 0.5s; } 
@keyframes spin{ to { transform: rotate(360deg); } }

/* -------------- DARKMODE -------------- */

body.darkmode .header {background-color: #1c1c1c!important; color:#fff!important; border-bottom: 1px solid #595959!important;}
body.darkmode .Footer{background-color: #000!important;}
body.darkmode .Footer a {color: var(--dark-p)!important;}
body.darkmode .Footer .whatsapp-heading a {color: #4caf50!important;}
 			  .Footer a:hover {color: var(--Accent)!important;}
body.darkmode .Footer a:hover {color: var(--Accent)!important;} 




/* ----------------------------------------------------------------- Single Post Dark Theme --------- */
			  .PostHeader{background-color: #fff; }
body.darkmode .PostHeader{background-color: #333333 !important; color: gray; }
body.darkmode .PostHeader h1 {color:#ffffff !important;}
body.darkmode .PostHeader p {color:#c1c1c1 !important;}
body.darkmode .Pagination {color:gray!important;}

/* .SinglePostContainer  .detail {color: var(--light-p);} */
.SinglePostContainer  .detail .detail-row:nth-child(odd){ background: var(--table-odd); }
.SinglePostContainer  .detail .detail-row:nth-child(even){ background: var(--table-even);}

/* body.darkmode .SinglePostContainer .detail { color:var(--dark-h2)!important;} */

/* Table of Content */
body.darkmode .toc-header{background: var(--dark-h3)!important; color: #000; }
			  .toc-container {border: 1px solid var(--light-p-shadow)!important; }
body.darkmode .toc-container {border: 1px solid var(--dark-border)!important; }
body.darkmode .toc-container {background: var(--dark-page-background)!important; color: var(--dark-p); }
			  .toc-container ul {font-size:1em; padding-left:10px!important;}
			  .toc-container ul ul {font-size:.8em; padding-left:20px!important;}
			  .toc-container ul ul ul {font-size:.7em; padding-left:30px!important;}
			  .toc-container a:hover {color: var(--Accent)!important;}
/* Post Container */
.content h1 { font-size: 1.2em!important;}
.content h2 { font-size: 1.1em!important;}
.content h3 { font-size: 1.0em!important; }
.content h4 { font-size: .9em!important; }
.content h5 { font-size: .9em!important; }

.content { padding: 10px;}
/* .content h2 ~ p {padding-left: 0px; padding-right: 10px;} */
.content h2 {padding: 4px; border-radius: 4px; padding-left: 10px; }
.content h2 ~ p {padding-left: 30px; padding-right: 10px;}
.content h3 {padding: 2px; border-radius: 4px; margin-left: 10px; padding-left: 10px; text-decoration:underline;}
.content h3 ~ p {padding-left: 50px; padding-right: 10px;}
.content table {padding: 10px 20px 20px 20px; margin-bottom: 20px;}
.content table th {text-align:left;}
.content table td {padding: 10px;}


body.darkmode .SinglePostContainer {background-color: var(--dark-page-background)!important;}
body.darkmode .SinglePostContainer  h1 {color:var(--dark-h1)!important;}
body.darkmode :is(.content, .PostHeader) :is(h2, h3, h4, li strong) {color:var(--dark-h2)!important;}

  
.content .JobPostContent h2 {background: linear-gradient(65deg, #ffa5005c, transparent);  border-left: 3px solid var(--Accent)!important; width: 100%;}
.important-note::before { 
    content: '\201C';
    font-size: 5em;
    color: var(--Accent);
    position: absolute;
    left: 15px;
    top: 5px;
    line-height: .6;
}
.important-note {
    font-family: Georgia,serif;
    font-size: 1.1em;
    font-style: italic;
    line-height: 1.8;
    color: #333;
    margin: 20px 0;
    padding: 20px 30px;
    border-left: 5px solid var(--Accent);
    background-color: var(--Accent-transparent);
    position: relative;
}
/* .important-note {background-color: var(--important-note-bg); color: #2a9a2a; border-radius: 12px!important; margin: 10px!important;} */
.JobPostContent ul li {padding-left:10px;}
.JobPostContent ul li::marker {
	content: "\f105";
    position: relative;
    font-size: 15px;
    color: var(--Accent);
    left: 0;
    font-family: FontAwesome;
	margin-right: 10px;
}
body.darkmode .scrim {background-color:black!important;     opacity: 0.8!important;}

				
body .page :is( p, span, ol, ul, table) { color:var(--light-p); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2)}
body.darkmode .page	 :is( p, span, ol, ul, table, label) {text-shadow: none;}
			 
			  .content :is(p, ol, ul){text-align:justify;}
			  tbody > :nth-child(odd) {background:var(--table-odd);}
			  tbody > :nth-child(even) {background:var(--table-even);}
			  thead {background:var(--table-even);}


			  .SinglePostContainer .whatsapp-wrapper{ background-color: #aaffaa2a; color: #2a9a2a; border-radius: 12px!important; margin: 10px!important;}


body.darkmode .SinglePostContainer .whatsapp-wrapper{background-color: #0c2f0a9a; color: #aaeeaa9a;	border: solid 1px #aaeeaa9a!important; }
/* -------------------------------------------------------- Form ---------------------------- */
.form_field { border-radius: 5px;}
body.darkmode .form_field { color: var(--dark-p); background: var(--table-even);}

.form_field:focus {  border: 1px solid var(--Accent); background: var(--Accent-transparent);}
body.darkmode :where(.brxe-brf-pro-forms) input[type=checkbox]+label, body.darkmode :where(.brxe-brf-pro-forms) input[type=radio]+label {color:var(--dark-p);}
body.darkmode .ql-editor p, body.darkmode .ql-toolbar {color:var(--dark-p);}
.ql-editor:focus {border: 1px solid var(--Accent);}
:where(.brxe-brf-pro-forms) .brf-field-image-preview-wrapper {
    display: flex;
    align-items: normal;
    margin: 10px;
    padding: 10px;
    align-content: center;
    justify-content: center;
}

  
/* -------------------------------------------------------- Right Side Bar ---------------------------- */
body.darkmode .RightSideBar {background-color: #1c1c1c!important;}
body.darkmode .RightSideBar h5 {color: #9c9c9c!important;}

/* --------------------------------------------------------- Left Filter ------------------------------*/


/* ------------------------------------------------------------- Job Loop Grid -Title Only -----------------*/
.joblist > div:hover{background: #ffebcc!important;   color: #000!important;  
	animation-name: wobble-vertical;
    animation-duration: 1s;
	animation-delay: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;}
.joblist:nth-child(odd) > div { background: var(--table-odd); border-bottom: 1px solid var(--table-odd-border); }
.joblist:nth-child(even) > div { background: var(--table-even); border-bottom: 1px solid var(--table-even-border); }
body.darkmode .joblist {color:#c3c3c3;}




/* --------------------------------------------------------------------------Expiry Date */
/* Base badge */
.job-expiry {
    display: inline-block;
    padding-right: 10px;
    border-radius: 6px;
/*     font-size: 13px; */
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Active jobs → GREEN */
.job-expiry.active {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

/* Expired jobs → RED */
.job-expiry.expired {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

/* Expires today → RED + BLINK */
.job-expiry.today {
    color: #ffffff;
    background-color: #dc3545;
    border: 1px solid #b21f2d;
    animation: blinkExpire 2.0s infinite;
}

@keyframes blinkExpire {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.20); }
    100% { transform: scale(1); }
}

@media (max-width: 768px) {
    .job-expiry.today {
        animation: none;
    }
}
/* .job_list_title_only_last_date .Active {
  text-shadow: 0 0 10px green;
}
.job_list_title_only_last_date .Expired {
  text-shadow: 0 0 10px red;
} */
.job_list_title_only_last_date .Today  {
/*   text-shadow: 0 0 10px red; */
  animation: blinkExpire 1.5s infinite;
}

@keyframes wobble-vertical {
  16.3%  { transform: translateY(6px); }
  33.3%  { transform: translateY(-4px);}
  49.95% { transform: translateY(3px); }
  66.6%  { transform: translateY(-2px); }
  83.25% { transform: translateY(1px); }
  100%   { transform: translateY(0); }
}
[class*="depth-0"]{font-size: .9em;}
[class*="depth-"]:not([class*="depth-0"]) {font-size: .8em;}

/* Beautiful Numbered List Styling */
.JobPostContent ol {
    list-style: none;
    counter-reset: job-counter;
    padding-left: 0;
    margin: 20px 0;
}

.JobPostContent ol li {
    counter-increment: job-counter;
    position: relative;
    padding: 12px 16px 12px 52px;
    margin-bottom: 10px;
    background: var(--Accent-transparent);
    border-radius: 8px;
 }

.JobPostContent ol li::before {
    content: counter(job-counter);
    position: absolute;
    left: 12px;
    top: 10px;
    width: 28px;
    height: 28px;
    background: var(--Accent);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}