:root{
  /* Brand fonts (Adobe Fonts kit ppj6axb, same as the front-end sites):
     bricolage-grotesque for body text, ballinger-condensed for headings/buttons */
  --font-family: 'bricolage-grotesque', 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-heading: 'ballinger-condensed', 'Manrope', system-ui, sans-serif;

  /* neutrals */
  --tertiary:#fbfbfb;
  --tertiary-2:#cccccc;
  --tertiary-3:#f3f3f3;

  /* status */
  --success:#87c392;
  --warning:#ebd585;
  --danger:#f1416c;

  /* 2026 design refresh — shared neutrals (design_handoff_my_profile)
     Headings navy #000E2C, body text black — both brands, light backgrounds */
  --ho-ink:#000E2C;
  --ho-body:#000000;
  --ho-muted:#68707f;
  --ho-faint:#98a0af;
  --ho-line:#eef1f6;
  --ho-line-2:#f2f4f8;
  --ho-bg:#f7f8fb;
  --ho-card:#ffffff;
  --ho-soft-btn:#f3f5f9;
  --ho-radius:20px;
  --ho-shadow:0 1px 3px rgba(16,24,48,.04);

  /* defaults (will be overridden per domain below) */
  --recruiters-brand:#F26522;
  --recruiters-brand-active:#d9531a;
  --secondary-brand:#F26522;
  --secondary-brand-hover:#d9531a;
  --recruiter-brand-2:#00B0FF;
  --brand-cta:#F26522;
  --brand-cta-hover:#d9531a;
  --brand-soft:rgba(242,101,34,.12);
  --brand-glow:rgba(242,101,34,.45);
  --brand-grad-2:#f79153;
  --brand-navy:#1b3a6b;
}

html.brand-hiredonline{
  --recruiters-brand:#F26522;
  --recruiters-brand-active:#d9531a;

  --secondary-brand:#F26522;
  --secondary-brand-hover:#d9531a;

  --brand-cta:#F26522;
  --brand-cta-hover:#d9531a;
  --brand-soft:rgba(242,101,34,.12);
  --brand-glow:rgba(242,101,34,.45);
  --brand-grad-2:#f79153;
  --brand-navy:#1b3a6b;
}

html.brand-brumjobs{
  --recruiters-brand:#000e2c;
  --recruiters-brand-active:#092155;
  --recruiter-brand-2:#00B0FF;
  --secondary-brand:#FF1E00;
  --secondary-brand-hover:#e91e03;

  --brand-cta:#FF1E00;
  --brand-cta-hover:#e91e03;
  --brand-soft:rgba(255,30,0,.10);
  --brand-glow:rgba(255,30,0,.40);
  --brand-grad-2:#ff6a4d;
  --brand-navy:#000e2c;
}

:root{
  --kt-primary: var(--recruiters-brand);
  --kt-primary-active: var(--recruiters-brand-active);

  --kt-text-primary: var(--recruiters-brand);

  --kt-input-solid-bg:#ffffff;
  --kt-input-solid-bg-focus: var(--tertiary);

  --bs-btn-hover-bg: var(--secondary-brand);
  --bs-btn-active-bg: var(--secondary-brand);
  --bs-btn-hover-color:#fff;
  --bs-btn-active-color:#fff;

  --kt-app-bg-color: var(--tertiary) !important;
  --bs-nav-link-font-size:1.3rem;
}

.criteria-group {
	width: 100%;
	margin-bottom: 60px;
}

.criteria-row {
	padding: 14px 16px 16px;
	background: var(--bs-body-bg, #ffffff);
	border: 1px solid var(--bs-border-color, #e4e6ef);
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.criteria-input-display.form-control[disabled] {
	background-color: var(--bs-gray-100, #f5f8fa);
	color: var(--bs-gray-800, #181c32);
	opacity: 1;
	cursor: default;
}

.criteria-slider-wrap {
	max-width: 420px;
}

.criteria-slider-label {
	color: var(--bs-gray-700, #3f4254);
	font-size: 0.95rem;
}

.criteria-slider {
	width: 100%;
	margin: 0;
	accent-color: var(--bs-primary, #009ef7);
}

.criteria-slider:disabled {
	opacity: 0.95;
}

.criteria-slider::-webkit-slider-runnable-track {
	height: 6px;
	background: linear-gradient(
		90deg,
		rgba(0, 158, 247, 0.18) 0%,
		rgba(0, 158, 247, 0.28) 100%
	);
	border-radius: 999px;
}

.criteria-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffffff;
	border: 4px solid var(--bs-primary, #009ef7);
	margin-top: -6px;
	box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.12);
}

.criteria-slider::-moz-range-track {
	height: 6px;
	background: linear-gradient(
		90deg,
		rgba(0, 158, 247, 0.18) 0%,
		rgba(0, 158, 247, 0.28) 100%
	);
	border-radius: 999px;
}

.criteria-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffffff;
	border: 4px solid var(--bs-primary, #009ef7);
	box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.12);
}

.criteria-slider-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	padding: 0 2px;
	color: var(--bs-gray-600, #7e8299);
	font-size: 1.15rem;
	font-weight: 600;
	user-select: none;
	max-width: 100%;
}

.criteria-slider-help {
	margin-top: 8px;
	color: var(--bs-gray-600, #7e8299);
	font-size: 1.05rem;
	line-height: 1.4;
}

.auth-bg {
	background-color:#000e2c;
}

.btn{
	border-radius: 0;
}

body, html {
	font-weight: normal;
	font-family: var(--font-family);
}

.text-secondary-link{
	color: var(--secondary-brand);
}

.text-secondary-link:hover {
	color: var(--secondary-brand)!important;
	text-decoration: underline !important;
}

.jq-tip-dialog{
	position: absolute;
	background-color: rgb(92, 176, 223);
	display: none;
	border-radius: 4px;
	z-index: 1000; 
}

.jq-tip-dialog h1{
	margin: 0;
	font-size: 15px;
	color: #fff;
	padding: 5px 0 5px 5px;
}

.jq-tip-dialog .wrapper{
	padding: 0 3px 3px 3px;
}

.jq-tip-dialog .wrapper > div{
	background-color: rgb(246, 246, 246);
}

.jq-tip-dialog .wrapper > div .jq-tip-content{
	padding: 5px;
	margin: 0;
	font-size: 15px;
	overflow-y: auto;
	word-wrap: break-word;
}

/* START: Custom Form */
.form-control:disabled {
	background-color: white !important;
	color: var(--kt-input-solid-color) !important;
	opacity: 1 !important;
	border: 1px solid var(--tertiary-2) !important;
}
.form-control.form-control-solid,.form-select.form-select-solid,.form-select.form-select-solid:active{
	border: 1px solid var(--tertiary-2)!important;
	font-size: 17px;
	background-color: white;
}

/* Quill editors — match the solid form inputs (17px) */
.ql-container { font-size: 17px; }
.ql-editor {
	font-family: Arial, Verdana, sans-serif;
	font-size: 17px;
	color: #434444;
	min-height: 150px; /* baseline for the shorter rejection-email editors */
}
#descriptionQuill .ql-editor { min-height: 700px; } /* the tall job-description editor */

/* Lists render via Metronic's bundled Quill v1 CSS natively — no override needed. */

/* Quill zeroes <p>/list margins inside .ql-editor, so paragraphs sit flush.
   Restore readable spacing so the editor preview matches how the stored HTML
   renders on job boards (which apply default paragraph margins). Tighten the gap
   between a bold heading paragraph and the list right below it. */
.ql-editor p { margin-bottom: 0.8em; }
.ql-editor ul, .ql-editor ol { margin: 1em 0; }            /* top gap below the heading + bottom gap */
.ql-editor li:not(:last-child) { margin-bottom: 0.5em; }   /* wider gap between bullet items */

.select2-container--bootstrap5.select2-container--disabled .form-select, .select2-selection__rendered{
	background-color: white;
    color: var(--kt-input-solid-color)!important;
}

.select2-container--bootstrap5.select2-container--disabled .form-select .select2-selection__rendered{
    color:var(--kt-input-solid-color)!important;
}

#jobCategory:focus,#jobPostcode:focus,#jobHours:focus,#jobSalaryRange:focus,#recruiterType:focus,#recruiterParent:focus{
	border-color:var(--tertiary-2)!important;
}

/* END: Custom Form */

/* Auth page */
.auth-shell{
  max-width: 1100px;  
  margin: 0 auto;
  width: 100%;
}

.card{
	border: 1px solid var(--tertiary-3);
}

.card .card-body {
    padding: 2rem 3.25rem 3rem 3.25rem;
}

.row > .card > .card-header{
	padding-right:0px;
}

i.validation.danger,
i.validation.success {
	display: none;
}

i.validation.awaiting {
	display: inline;
}

i.validation.danger {
	color: var(--kt-danger) !important;
}

i.validation.success {
	color: var(--kt-success) !important;
}

i.validation.awaiting {
	color: var(--kt-text-muted) !important;
}

i.validation.danger.visible,
i.validation.success.visible {
	display: inline;
}

i.validation.awaiting.invisible {
	display: none;
}

.validation.alert-danger {
	display: none;
}

.alert-danger, .text-danger{
	border: 0;
	background-color: transparent;
	font-size: 1.2rem;
}

.fa-exclamation-circle{
	cursor: pointer;
	color: #eb662487 !important;
}

/* END: Custom Form Validations  */

/* START: Applications Styling */

#applications-list {
	display: flex;
	flex-direction: column;
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
}

#applications-list .card-body {
	padding: 7px;
}

.application .application-name {
	font-weight: 600;
}

.application .application-name.application-viewed {
	font-weight: 400;
}

.card.application {
	position: relative;
	min-width: 210px;
	border-left: solid transparent 11px;
	padding-top: 5px;
	padding-bottom: 5px;
	transition: all 0.25s ease-in-out;
}

.card.application.active {
	border-left: solid var(--kt-primary) 11px;
	background-color: #fefaf7;
}

.card.application:not(.card.application.active):hover {
	border-left: solid var(--kt-gray-500) 11px;
}

.card.application a.selection {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Keep the interactive bits clickable/hoverable above the full-card link overlay */
.card.application .rating,
.card.application input[type="checkbox"] {
	position: relative;
	z-index: 2;
}

.box-number {
	display: inline-block;
	vertical-align: middle;
}

.box-number .number {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	width: 26px;
	height: 26px;
	background-color: var(--kt-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	border-radius: 50%;
}

.box-number:hover .number:hover {
	background-color: var(--kt-primary-active) !important;
}

.nav-item:hover, .nav-item:active, .nav-item .active {
	border-bottom-color: var(--secondary-brand)!important;
}

.nav-link:hover {
	color: var(--secondary-brand-hover) !important;
	border-bottom: 2px solid var(--secondary-brand-hover) !important;
}

table .box-number:hover .number,
.nav-link.active .box-number .number,
.nav-link:hover .box-number .number {
	background-color: var(--secondary-brand);
}

.btn.btn-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--kt-gray-500) !important;
	padding: 0.5rem !important;
	width: 35px;
	height: 35px;
}

.btn.btn-circle:hover {
	border: 1px solid var(--kt-primary) !important;
}

.btn.btn-circle:hover i {
	color: var(--kt-primary) !important;
}

.btn.btn-circle i {
	margin: auto;
	padding: 0;
}

.btn-secondary-branded{
	background-color: var(--secondary-brand);
	color: #ffffff;
}

.btn-secondary-branded:hover{
	background-color: var(--secondary-brand-hover);
	color: #ffffff;
}

#viewer-status {
	background-color: var(--kt-gray-300);
	border-radius: 0.625rem;
	padding: 7px;
	font-style: italic;
}

.width-40{
	width:40%;
}
.width-60{
	width:60%;
}

.rating .single-rate {
	cursor: pointer;
	color: var(--tertiary-2);
}

.rating .single-rate.checked {
	color: var(--recruiters-brand);
}

.rating-ai{
	color:#ffffff;
	font-size: 0.9rem;
	background-color: var(--recruiter-brand-2);
}

#side_ai_summary span {
    color: #ffffff;
}

#applicant_ai_summary {
    border: 0 !important;
    box-shadow: none !important;
	background-color: #009ef703;
    outline: none;
	font-size: 1.25rem;
	line-height: 2rem;
}

.form-check-input{
	background-color: #fff !important;
    border: 1px solid #d3d3d3 !important; /* Light grey border */
}

.form-check-input:checked {
	background-color: #fba981 !important;
}

.form-check-input:checked+label{
	color:#000000 !important;
}

@media only screen and (max-width: 767px) {
	#applications-list {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 6px;
	}
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1600px;
    }
	#myTabContent{
		max-width:1100px;
	}
}

@media (min-width: 992px) {
    :root {
        /* 2026 design refresh: sidebar widened to the design's 264px */
        --kt-app-sidebar-width: 264px;
        --kt-app-sidebar-width-actual: 264px;
    }
}

@media only screen and (min-width: 320px) {
	div::-webkit-scrollbar {
		height: 5px;
		width: 5px;
	}
	
	div::-webkit-scrollbar-thumb {
		background-color: var(--kt-gray-300);
		border-radius: 7px;
	}

	div:hover::-webkit-scrollbar-thumb {
		background-color: var(--kt-gray-400);
	}
}

/* END: Applications Styling */

/* START: Application Registration Styling */

#application a:not(a.btn) {
	color: #eb6624 !important;
}

#application p {
	font-size: 15px;
}

#application .key-details,
#application .key-details i {
	font-size: 15px;
}

.alert.alert-applicants {
	background-color: #eb6624;
	border-color: #eb6624;
	color: #fff;
	overflow: hidden;
	transition: all 0.35s ease-out;
}

.alert.alert-applicants i {
	color: #eb6624;
}

.alert.alert-applicants ul {
	list-style: none;
	margin: 0;
}

.alert.alert-applicants .unhovered {
	font-weight: 600 !important;
}

.alert.alert-applicants ul {
	max-height: 0px;
	color: #eb6624 !important;
	visibility: hidden;
	transition: all 0.35s ease-in-out;
}

.alert.alert-applicants:hover {
	background-color: #f8d0bd;
	color: #eb6624;
}

.alert.alert-applicants:hover ul {
	max-height: 300px;
	visibility: visible;
}

.btn-applicants-primary {
	color: #fff;
	background-color: #eb6624;
	transition: all 0.2s ease-in;
}

.btn-applicants-primary:hover,
.btn-applicants-primary:focus {
	color: #fff;
	background-color: #f8d0bd !important;
}

.my-menu-icons,
.my-menu-captions {
    display: flex;
    justify-content: space-between;
}

.my-menu-icons {
    align-items: center;
}

.my-menu-item {
    color: #25282b;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

.my-menu p {
    color: #25282b;
    font-size: 15px;
    margin: 5px 0 0 0;
}

.my-menu-item i {
	color: #25282b;
    font-size: 25px;
}

.my-menu-icons hr {
	border-color: #25282b;
    width: 80%;
    border-radius: 25px;
    border-width: 5px;
    margin: 0 0.5rem;
}

.my-menu-captions hr {
    width: 80%;
    border-radius: 25px;
    border-width: 2px;
    border-color: transparent !important;
    margin: 0 0.5rem;
}

.my-menu .circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin: auto;
    border-radius: 50%;
    border: 3px solid;
}

.my-menu-item.active {
    color: #fff;
}

.my-menu-item.active p {
    color: #fff;
}

.my-menu-item.active i {
	color: #fff;
}

.my-menu-icons hr.active {
    border-color: #fff;
}

#rejectionSubmit{
	margin: 12px 0px 90px 0px;
}

/* END: Application Registration Styling */

.logoHolder img {
	margin: 0 auto 0 0;   /* left-justified in the employer card */
	max-width: 95%;
	max-height: 125px;
}

/* START: BUTTONS AND BADGES */

.btn.btn-xs {
	padding: calc(0.275rem + 1px) calc(1.25rem + 1px) !important;
	margin: 4px 0 4px 0;
}

.badge{
	background-color: #d3d3d3;
	color:#ffffff;
	border-radius: 0;
	text-align:center;
	min-width:52px;
	display:block;
	font-weight:normal;
}

.badge-cvlibrary {
	border-radius: 50%!important;
	background-color: #CCC;
	color: #ffffff;
	min-width:auto!important;
}

.badge-totaljobs {
	border-radius: 50%!important;
	background-color: #CCC;
	color: #ffffff;
	min-width:auto!important;
}

.badge-monster {
	border-radius: 50%!important;
	background-color: #CCC;
	color: #ffffff;
	min-width:auto!important;
}

.badge-reed {
	border-radius: 50%!important;
	background-color: #CCC;
	color: #ffffff;
	min-width:auto!important;
}

.badge-jobg8 {
	border-radius: 50%!important;
	background-color: #CCC;
	color: #ffffff;
	min-width:auto!important;
}

.badge-hired {
	border-radius: 50%!important;
	background-color: #CCC;
	color: #ffffff;
	min-width:auto!important;
}

.badge-general {
	border-radius: 50%!important;
	display: inline-flex;
	min-width:auto!important;
}

.badge-success{
	background-color: var(--success);
}

.badge-warning{
	background-color: var(--warning);
}

.badge-danger{
	background-color: var(--danger);
}

/* END: BUTTONS AND BADGES */

button.deleteUserButton {
	border: none;
	width: 100%;
	background-color: transparent;
	color: red !important;
	font-weight: bold;
}

button.deleteUserButton:hover {
	background-color: #fff5f8 !important;
}

/*Tinymce Custom CSS */

.mce-content-body p{
	color: var(--kt-input-solid-color);
	font-weight: 500;
	font-size:15px;
	line-height: 1.5rem;
}

input[name="rejectionEmailGreeting"], input[name="rejectionEmailRe"], input[name="rejectionEmailRecruiterName"]{
	padding-left:0px;
}

[type=validate] {
	-webkit-appearance: button;
}

.h-50px {
	height: 50px !important;
}

/* Calendar Picker Changes */

.input-container-date input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    position: relative;
    width: 100%;
}

.input-container-date input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
.fa-t .fa-tick-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.fa-tick-list{
	padding-left: 0;
}
.fa-tick-list li {
    margin-bottom: 6px;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.fa-tick-list li i {
    color:  var(--secondary-brand);
    margin-right: 12px;
    font-size: 18px;   /* makes the tick larger */
    font-weight: bold; /*  boldens the tick */
}

.form-label{
	font-size:1.2rem !important;
	font-weight: bold !important;
	margin-top: 2rem !important;
}

/* Currently hovered/focused option */
body li.select2-results__option--highlighted {
	background-color: white !important; 
	color: #eb6624 !important;
	font-size: 1.2rem;
}

/* Selected + hovered (when navigating back to selected) */
body li.select2-results__option--highlighted.select2-results__option--selected {
	color: #eb6624 !important;
	background-color: #f7f7f7 !important;
	font-size: 1.2rem;
}

/* Selected but NOT hovered (removes blue when another is focused) */
body li.select2-results__option--selected:not(.select2-results__option--highlighted) {
	background-color: #f7f7f7 !important;
	color: #333 !important;
	font-size: 1.2rem;
}
.select2-search__field{
	font-size: 1.2rem !important;
}

.select2-results{
	font-size: 1.2rem !important;
}

/* ============================================================
   Applications panel – candidate action buttons
   Scoped to #application-buttons on the job applications page,
   so no other buttons on the site are affected.
   ============================================================ */
#application-buttons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}

#application-buttons > .btn {
	margin: 0 !important;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600 !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
	border: 1px solid transparent !important;
}

#application-buttons > .btn i {
	font-size: 0.95em;
	color: inherit !important;
}

/* Positive actions – Shortlist / Interview / Offer / Hire (solid green) */
#application-buttons > .btn-primary {
	background-color: #17b26a !important;
	border-color: #17b26a !important;
	color: #ffffff !important;
}
#application-buttons > .btn-primary:hover,
#application-buttons > .btn-primary:focus {
	background-color: #12945a !important;
	border-color: #12945a !important;
	color: #ffffff !important;
}

/* Negative actions – Reject / Send Rejection (red outline) */
#application-buttons > .btn-danger,
#application-buttons > .btn-warning {
	background-color: #ffffff !important;
	border-color: #f0463a !important;
	color: #f0463a !important;
}
#application-buttons > .btn-danger:hover,
#application-buttons > .btn-danger:focus,
#application-buttons > .btn-warning:hover,
#application-buttons > .btn-warning:focus {
	background-color: #fef2f2 !important;
	border-color: #f0463a !important;
	color: #f0463a !important;
}

/* Neutral actions – Download CV / Cover Letter (grey outline) */
#application-buttons > .btn-secondary {
	background-color: #ffffff !important;
	border-color: #d0d5dd !important;
	color: #344054 !important;
}
#application-buttons > .btn-secondary:hover,
#application-buttons > .btn-secondary:focus {
	background-color: #f9fafb !important;
	border-color: #d0d5dd !important;
	color: #344054 !important;
}

/* Applications panel – AI Match circular gauge */
.ai-match-label {
	font-size: 15px;
	font-weight: 600;
	color: #6c7293;
	margin-right: 8px;
}
.ai-match-ring {
	position: relative;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
}
.ai-match-ring svg {
	width: 100%;
	height: 100%;
	display: block;
}
.ai-match-track {
	fill: none;
	stroke: #eaecf0;
	stroke-width: 3;
}
.ai-match-fill {
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
	transition: stroke-dasharray 0.4s ease;
}
.ai-match-value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	color: #3f4254;
}
.ai-match--green .ai-match-fill { stroke: #17b26a; }
.ai-match--green .ai-match-value { color: #17b26a; }
.ai-match--amber .ai-match-fill { stroke: #f5a623; }
.ai-match--amber .ai-match-value { color: #f5a623; }
.ai-match--red .ai-match-fill { stroke: #e5484d; }
.ai-match--red .ai-match-value { color: #e5484d; }

/* Applications panel – Sort segmented control (scoped to #panel-sort-bar) */
#panel-sort-bar {
	flex-wrap: wrap;
	gap: 8px 10px;
}
#panel-sort-bar > .d-flex {
	flex-wrap: wrap;
	gap: 6px;
}
#panel-sort-bar .hol-sort-label {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #a1a5b7;
	margin-right: 10px;
}
#panel-sort-bar .hol-sort-group {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background-color: #f4f4f5;
	border-radius: 8px;
}
#panel-sort-bar .hol-sort-option {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: #6c7293;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#panel-sort-bar .hol-sort-option:hover {
	color: #3f4254;
}
#panel-sort-bar .hol-sort-option.active {
	background-color: #ffffff;
	color: #181c32;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
#panel-sort-bar .hol-select-all {
	margin: 0;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: #6c7293;
}
#panel-sort-bar .hol-select-all:hover {
	color: #3f4254;
}

/* Applications panel – CV / Cover Letter document tabs (scoped to #nav-docs) */
#nav-docs {
	border-bottom: 1px solid #e4e6ef;
	gap: 4px;
	flex-wrap: nowrap;
	align-items: flex-end;
	padding-left: 0;
}
#nav-docs .nav-item {
	margin-bottom: -1px; /* sit the tabs' bottom edge on the frame line */
}
#nav-docs .nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	gap: 8px;
	padding: 10px 18px !important;
	border: 1px solid #e4e6ef;
	border-radius: 8px 8px 0 0;
	background-color: #f4f4f5;
	color: #9aa0b3 !important;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#nav-docs .nav-link:hover {
	color: #6c7293 !important;
	background-color: #eef0f2;
}
/* Active tab: same grey as the PDF viewer canvas, with a matching bottom
   edge, so the tab and the viewer below read as one attached surface. */
#nav-docs .nav-link.active {
	background-color: #f4f5f8 !important;
	border: 1px solid #e4e6ef !important;
	border-bottom: 1px solid #f4f5f8 !important;
	color: #181c32 !important;
	position: relative;
	z-index: 2;
	box-shadow: none !important;
}
#nav-docs .nav-link i {
	font-size: 0.95em;
}

/* Attach the viewer frame directly beneath the tab row: the nav-docs
   border-bottom is the frame's top edge, the viewer carries the sides and
   bottom. The old in-between tab-content container is never populated
   (job-application.js only ever empties it) and just created a gap. */
#application-content-documents-tabs {
	display: none;
}
#viewer {
	margin-top: 0 !important;
	border: 1px solid #e4e6ef;
	border-top: 0;
	border-radius: 0 0 8px 8px;
	overflow: hidden;
	background-color: #f4f5f8;
}

/* Candidate action row: [advance stage] [reject X] [dots], dots opening a
   floating menu (notes / screening / booking / downloads / contact). Dots
   button is a quarter of the width of the two main buttons. */
/* GRID, not flex: three content-sized columns that cannot wrap. One row is
   the default everywhere; below the breakpoint the grid switches to stacked. */
.app-actions-row {
	position: relative;
	display: grid;
	grid-template-columns: max-content max-content max-content;
	align-items: center;
	gap: 8px;
}
@media (max-width: 575.98px) {
	.app-actions-row {
		grid-template-columns: 1fr;
		justify-items: stretch;
	}
	.app-action-main,
	.app-action-reject,
	.app-action-dots {
		width: 100%;
	}
}

/* Responsive-audit fixes (Aug 2026) */
/* Tab count badges: comfortable tap size on touch widths */
@media (max-width: 991.98px) {
	.box-number {
		min-width: 34px;
		min-height: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}
/* Candidate-list sort bar wraps inside its column instead of overflowing
   under the detail panel */
#panel-sort-bar {
	flex-wrap: wrap;
	row-gap: 6px;
}
/* Status tabs: horizontal scroll on phones instead of wrapping into
   ragged rows */
@media (max-width: 767.98px) {
	#nav {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	#nav .nav-link {
		white-space: nowrap;
	}
	#nav .nav-item.ms-auto {
		margin-left: 0 !important;
	}
}

/* Container query: stack based on the COLUMN's real width, not the
   viewport — covers every sidebar/scaling combination (e.g. 1440–1536px
   laptops with the sidebar expanded). Older browsers skip this and keep
   the single row. */
#application-buttons {
	container-type: inline-size;
}
@container (max-width: 355px) {
	.app-actions-row {
		grid-template-columns: 1fr;
		justify-items: stretch;
	}
	.app-action-main,
	.app-action-reject,
	.app-action-dots {
		width: 100%;
	}
}
.app-action-main,
.app-action-reject {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 100px;
	height: 44px;
	padding: 0 14px !important;
	border-radius: 24px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	white-space: nowrap;
}
.app-action-main {
	background-color: #17c653 !important;
	border: 1px solid #17c653 !important;
	color: #ffffff !important;
}
.app-action-main i {
	color: #ffffff !important;
	font-size: 13px;
}
.app-action-main:hover {
	background-color: #04b440 !important;
	border-color: #04b440 !important;
}
.app-action-reject {
	background: #ffffff !important;
	border: 1px solid #f1416c !important;
	color: #f1416c !important;
}
.app-action-reject i {
	color: #f1416c !important;
	font-size: 15px;
}
.app-action-reject:hover {
	background: #fff5f8 !important;
	border-color: #d9214e !important;
}
/* "Actions" pill — same size/shape as the two main pills; white with a
   grey border */
.app-action-dots {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 100px;
	height: 44px;
	padding: 0 14px !important;
	background: #ffffff !important;
	border: 1px solid #b5b9c2 !important;
	color: #3f4254 !important;
	border-radius: 24px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	white-space: nowrap;
}
.app-action-dots i {
	color: #3f4254 !important;
	font-size: 13px;
}
.app-action-dots:hover {
	background: #f4f4f5 !important;
}
#app-actions-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 40;
	background: #ffffff;
	border-radius: 12px;
	min-width: 240px;
	padding: 8px;
	box-shadow: 0 10px 35px rgba(24, 28, 50, 0.18);
}
.app-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	color: #181c32;
	cursor: pointer;
	text-decoration: none;
}
.app-menu-item:hover {
	background: #f1f1f4;
	color: #181c32;
}
.app-menu-item i {
	width: 18px;
	text-align: center;
	color: #5e6278;
}
.app-menu-item.disabled {
	color: #a1a5b7;
	cursor: default;
}
.app-menu-item.disabled:hover {
	background: transparent;
}
.app-menu-sep {
	height: 1px;
	background: #eff2f5;
	margin: 6px 4px;
}

/* Applicant name heading – only this H2 */
#application-content-applicant {
	font-size: 1.75rem !important;
}

/* Contact icons – email / phone (grey outline, matching action buttons) */
#application-contacts .btn {
	width: 40px;
	height: 40px;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff !important;
	border: 1px solid #d0d5dd !important;
	border-radius: 8px !important;
	color: #344054 !important;
}
#application-contacts .btn:hover,
#application-contacts .btn:focus {
	background-color: #f9fafb !important;
	border-color: #d0d5dd !important;
	color: #344054 !important;
}
#application-contacts .btn i {
	color: inherit !important;
}

/* ============================================================
   2026 DESIGN REFRESH (design_handoff_my_profile)
   Applies the modernised design language — Manrope, airy white
   surfaces, 20px cards, soft brand accents — across the admin
   (recruiters/superadmin) and jobseeker portals. Brand colours
   come from the html.brand-* token blocks at the top of this
   file, so Brumjobs automatically gets red/navy accents.
   ============================================================ */

/* ---- typography ---- */
/* Root font size is owned by the "uniform type scale" block below (html 14px
   / body 15px !important on ALL viewports) — it outranks the bundle's
   14/17/12px responsive roots. Do not patch the bundle for sizing again. */
body {
	color: var(--ho-body);
	-webkit-font-smoothing: antialiased;
}
/* Typography mirrors the front-end sites:
   bricolage-grotesque 300 body with 600 emphasis,
   ballinger-condensed 700 headings & buttons */
body {
	font-weight: 300;
}
strong, b,
.fw-bold, .fw-bolder, .fw-boldest {
	font-weight: 600 !important;
}
h1, h2, h3, h4, h5, h6,
.card-title, .fs-2x, .page-heading {
	font-family: var(--font-heading);
	color: var(--ho-ink);
	font-weight: 700;
	letter-spacing: normal;
}
.btn,
.ho-name,
.ho-panel h2 {
	font-family: var(--font-heading);
}
.btn {
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: .01em;
}

/* ---- uniform type scale (Aug 2026 sweep) ----
   Base body text is 15px, and EVERY h1/h2 renders at ONE size: 2.4rem.
   The !important is deliberate — Metronic's fs-1/fs-3 utilities on the 45+
   page-heading h1s carry !important themselves, and this single rule
   outranks them all site-wide, so no view needs its classes stripped.
   (Bootstrap accordion-header h2s are unaffected visually — their text
   size lives on the inner .accordion-button.) */
/* Root & body: ONE scale on EVERY viewport. The bundle ships 14px desktop
   but 17px tablet / 12px phone roots — all !important — which left plain
   body text at 14px and collapsed rem-based text on mobile. Declared here
   AFTER the bundle with matching !important, these win everywhere:
   1rem = 14px on all screens, body text = 15px on all screens. */
html {
	font-size: 14px !important;
}
body {
	font-size: 15px !important;
}
/* tables carry the 15px base explicitly — they inherit by default, but any
   wrapper with its own size (or a stale cascade) was leaving cells at 14px */
.table {
	font-size: 15px;
}
/* ...and NOTHING in a data table drops below the base: column headers
   (fs-7), status badges (Metronic default ~12px) and count bubbles all
   read at 15px. The !important matches the fs-* utilities' own. */
.table thead th,
.badge,
.box-number .number {
	font-size: 15px !important;
}
/* GLOBAL floor: no text on the site renders below the 15px base — the
   fs-7/8/9 utilities (~13/12/10px) are capped up to it. Hierarchy comes
   from weight and colour, not tininess. (fs-6 is ~15px already.) */
.fs-7, .fs-8, .fs-9 {
	font-size: 15px !important;
}
h1, .h1, .page-heading {
	font-size: 2.4rem !important;
	line-height: 1.2;
}
h2, .h2 {
	font-size: 2rem !important;
	line-height: 1.2;
}

/* ---- app background & global text colours ---- */
:root {
	--kt-app-bg-color: var(--ho-bg) !important;
	/* .text-dark etc. resolve through these vars (the utilities carry !important,
	   so the vars are the only clean override point) */
	--kt-text-dark: var(--ho-ink);
	--kt-dark: var(--ho-ink);
	--bs-body-color: var(--ho-body);
	--kt-body-color: var(--ho-body);
	/* Metronic menu hover colour ships as blue #009ef7 — use the brand hover */
	--kt-menu-link-color-hover: var(--brand-cta-hover);
	/* light-primary surfaces (e.g. btn-active-light-primary hover on the
	   Actions pill) ship as pale blue #f1faff — use the brand soft tint */
	--kt-primary-light: var(--brand-soft);
}

/* ---- sidebar: dark rail (per 31 Jul redesign — near-black bg, white text,
   grey active pill, white footer pill). Tokens here so a retune is one edit. */
:root {
	--ho-side-bg:     #1E1E1E;
	--ho-side-line:   rgba(255, 255, 255, .08);
	--ho-side-hover:  rgba(255, 255, 255, .10);
	--ho-side-active: #6B6B6B;
	--ho-side-ink:    #FFFFFF;
	--ho-side-faint:  #9AA0A6;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar {
	--kt-app-sidebar-base-bg-color: var(--ho-side-bg);
	background-color: var(--ho-side-bg) !important;
	border-right: 1px solid var(--ho-side-line) !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar #kt_app_sidebar_logo {
	background-color: var(--ho-side-bg) !important;
	border-bottom: 1px solid var(--ho-side-line) !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu {
	padding-left: 14px;
	padding-right: 14px;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item {
	margin-bottom: 3px;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link {
	border-radius: 11px;
	font-weight: 600;
	font-size: 1.15rem; /* slightly above base body text */
	color: var(--ho-side-ink);
	padding: 13px 15px;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-title {
	font-size: 1.15rem;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon {
	width: 24px;
	margin-right: 12px;
	justify-content: flex-start;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
	font-size: 19px;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon svg {
	width: 20px;
	height: 20px;
}
/* submenu items match base body text */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-sub .menu-item .menu-link,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-sub .menu-item .menu-link .menu-title {
	font-size: 1.075rem;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-title {
	color: var(--ho-side-ink);
	font-weight: 600;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-arrow:after {
	color: var(--ho-side-ink);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover:not(.disabled):not(.active),
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.hover > .menu-link:not(.disabled):not(.active) {
	background-color: var(--ho-side-hover) !important;
	color: var(--ho-side-ink) !important;
}
/* !important: Metronic's dark-sidebar theme sets hover text with
   higher-specificity selectors */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-icon .svg-icon {
	color: var(--ho-side-ink) !important;
}
/* submenu bullets follow the text colour on hover/active */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-bullet .bullet,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-bullet .bullet {
	background-color: var(--ho-side-ink) !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active {
	background-color: var(--ho-side-active) !important;
	color: var(--ho-side-ink);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-title {
	color: var(--ho-side-ink);
	font-weight: 700;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon .svg-icon {
	color: var(--ho-side-ink);
}
/* open/current parent items — everything rests white on the dark rail, so the
   open parent just stays white with no fill; the active child's grey pill is
   the only "you are here" marker. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link .menu-title,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link .menu-title,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon .svg-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon .svg-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link .menu-arrow:after,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link .menu-arrow:after {
	color: var(--ho-side-ink) !important;
	background-color: transparent !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here:has(.menu-link.active) > .menu-link,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show:has(.menu-link.active) > .menu-link,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here:has(.menu-link.active) > .menu-link .menu-title,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show:has(.menu-link.active) > .menu-link .menu-title,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here:has(.menu-link.active) > .menu-link .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show:has(.menu-link.active) > .menu-link .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here:has(.menu-link.active) > .menu-link .menu-icon .svg-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show:has(.menu-link.active) > .menu-link .menu-icon .svg-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here:has(.menu-link.active) > .menu-link .menu-arrow:after,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show:has(.menu-link.active) > .menu-link .menu-arrow:after {
	color: var(--ho-side-ink) !important;
}
/* section labels e.g. SYSTEM ADMIN */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-section,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-content .menu-heading {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--ho-side-faint) !important;
	text-transform: uppercase;
}
/* sidebar footer pill button — white pill on the dark rail */
.app-sidebar .app-sidebar-footer .btn {
	background-color: #FFFFFF !important;
	border: 0 !important;
	border-radius: 11px !important;
	color: #1E1E1E !important;
	font-weight: 700;
}
.app-sidebar .app-sidebar-footer .btn:hover {
	background-color: #E6E6E6 !important;
	color: #000000 !important;
}
/* logo row: wordmark left, collapse chevron right (design) */
[data-kt-app-layout="dark-sidebar"] .app-sidebar #kt_app_sidebar_logo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 22px;
	padding-right: 16px;
}
/* ---- Indeed-style desktop sidebar collapse (icon rail) ----
   The Collapse button toggles Metronic's native sidebar-minimize (icon rail,
   hover to peek). When minimized, the button shows a burger instead. */
.ho-side-collapse {
	display: none;
	align-items: center;
	gap: 9px;
	background: transparent;
	border: 0;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--ho-side-ink);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}
.ho-side-collapse:hover {
	background-color: var(--ho-side-hover);
	color: var(--ho-side-ink);
}
.ho-side-collapse i {
	font-size: 17px;
	color: inherit;
}
.ho-side-collapse .when-mini {
	display: none;
	align-items: center;
}
.ho-side-collapse .when-mini i {
	font-size: 26px;
	color: var(--ho-side-ink);
}
.ho-side-collapse .when-open {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.ho-side-collapse .when-peek {
	display: none;
	align-items: center;
	gap: 9px;
}
/* header logo (desktop only — mobile header stays burger + avatar) */
.ho-header-logo {
	display: none;
	align-items: center;
	margin-right: 16px;
}
@media (min-width: 992px) {
	.ho-side-collapse {
		display: inline-flex;
	}
	.ho-header-logo {
		display: flex;
	}
	/* Indeed-style: collapse/expand is instant, not animated */
	.app-sidebar,
	.app-wrapper,
	.app-header {
		transition: none !important;
	}
	/* right after clicking Collapse the cursor is still over the sidebar, so
	   Metronic's hover-peek would hold it open — suppress hover until the
	   cursor leaves the rail (class managed by sidebar-collapse.js) */
	body.ho-no-peek .app-sidebar {
		pointer-events: none;
	}
	/* minimized rail: swap ✕ Collapse for a burger, centre it */
	[data-kt-app-sidebar-minimize="on"] .app-sidebar .ho-side-collapse .when-open {
		display: none;
	}
	[data-kt-app-sidebar-minimize="on"] .app-sidebar .ho-side-collapse .when-mini {
		display: inline-flex;
	}
	[data-kt-app-sidebar-minimize="on"] .app-sidebar:not(:hover) #kt_app_sidebar_logo {
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
	}
	/* when peeking (hover-expanded rail), the click restores the sidebar —
	   so the label reads Maximise, not Collapse */
	[data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .ho-side-collapse .when-open {
		display: none;
	}
	[data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .ho-side-collapse .when-mini {
		display: none;
	}
	[data-kt-app-sidebar-minimize="on"] .app-sidebar:hover .ho-side-collapse .when-peek {
		display: inline-flex;
	}
}

/* collapse-toggle chevron — plain inline button, not the floating edge pill */
.app-sidebar .app-sidebar-toggle.ho-side-toggle {
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--ho-side-faint) !important;
}
.app-sidebar .app-sidebar-toggle.ho-side-toggle:hover {
	color: var(--ho-side-ink) !important;
}
.app-sidebar .app-sidebar-toggle.ho-side-toggle .svg-icon {
	color: inherit !important;
}

/* ---- header: white with hairline border ---- */
#kt_app_header {
	background-color: var(--ho-card) !important;
	border-bottom: 1px solid var(--ho-line) !important;
	box-shadow: none !important;
}
.app-header-menu .menu .menu-item .menu-link {
	border-radius: 11px;
	font-weight: 600;
}
.app-header-menu .menu .menu-item .menu-link.active,
.app-header-menu .menu .menu-item.here > .menu-link {
	background-color: var(--brand-soft) !important;
	color: var(--brand-cta-hover) !important;
}
/* header avatar */
.app-navbar .symbol img,
.app-navbar .symbol .symbol-label {
	border-radius: 12px;
}

/* ---- cards ---- */
.card {
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius);
	box-shadow: var(--ho-shadow);
}
.card .card-header {
	border-bottom: 1px solid var(--ho-line-2);
}
.card .card-footer {
	border-top: 1px solid var(--ho-line-2);
}

/* ---- buttons ---- */
.btn {
	border-radius: 12px;
	font-weight: 700;
}
.btn.btn-sm {
	border-radius: 10px;
}
.btn.btn-primary {
	background-color: var(--brand-cta) !important;
	border-color: var(--brand-cta) !important;
	color: #fff !important;
	box-shadow: 0 10px 22px -8px var(--brand-glow);
}
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active) {
	background-color: var(--brand-cta-hover) !important;
	border-color: var(--brand-cta-hover) !important;
	color: #fff !important;
}
.btn.btn-light,
.btn.btn-secondary:not(.btn-secondary-branded) {
	background-color: var(--ho-soft-btn);
	color: var(--ho-body);
}
.btn.btn-light:hover {
	background-color: #e9edf3;
	color: var(--ho-ink);
}

/* ---- pills & badges ---- */
/* regular weight — at the 15px floor, bold badges read heavier than body copy */
.badge {
	border-radius: 999px;
	font-weight: 400 !important;
	letter-spacing: .02em;
}

/* /jobs list — on narrower screens the wide text columns wrap instead of
   squeezing the Actions cell, and the Actions button never breaks in two */
#jobsListTable td { overflow-wrap: break-word; }
#jobsListTable .jobcol-title { max-width: 300px; }
#jobsListTable .jobcol-recruiter { max-width: 170px; }
#jobsListTable td:last-child,
#jobsListTable td:last-child .btn { white-space: nowrap; }

/* upgrade-admin action-key pills — one uniform width whatever the key text
   (also undoes the legacy .badge display:block/min-width stretch above) */
.badge.key-pill {
	display: inline-block;
	width: 130px;
	min-width: 0;
	text-align: center;
	margin-bottom: 4px;
}
.badge-light-primary {
	background-color: var(--brand-soft);
	color: var(--brand-cta-hover);
}

/* ---- forms ---- */
.form-control,
.form-select,
.input-group-text {
	border-radius: 10px;
	font-size: 17px;
}
.form-control.form-control-solid,
.form-select.form-select-solid,
.form-select.form-select-solid:active {
	border: 1px solid #e4e8f0 !important;
}
/* labels are consistent site-wide: the fs-6 fw-semibold treatment.
   Many modal labels carry fw-bold/fw-bolder classes — the element+class
   selectors outrank the bare utility classes, pulling them back to 500 */
label,
.form-label {
	color: var(--ho-ink);
	font-weight: 500;
}
label.fw-bold,
label.fw-bolder,
label.fw-boldest,
.form-label.fw-bold,
.form-label.fw-bolder {
	font-weight: 500 !important;
}
/* size: one label size site-wide — the ~110 fs-5 labels (recruiter/job forms)
   are normalised down to the fs-6 standard used everywhere else */
label.fs-5,
.form-label.fs-5 {
	font-size: 1.075rem !important;
}

/* ---- modals & dropdowns ---- */
.modal-content {
	border: 1px solid var(--ho-line);
	border-radius: var(--ho-radius);
}
/* modal close (X) — same soft-square treatment as the ho-edit pencils,
   with the brand-tinted hover */
.modal .btn-icon[data-kt-users-modal-action="close"],
.modal .btn-icon[data-kt-child-modal-action="close"],
.modal .btn-icon[data-bs-dismiss="modal"],
.modal .btn-close {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background-color: var(--ho-soft-btn);
	color: var(--ho-muted);
	opacity: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.modal .btn-icon[data-kt-users-modal-action="close"]:hover,
.modal .btn-icon[data-kt-child-modal-action="close"]:hover,
.modal .btn-icon[data-bs-dismiss="modal"]:hover,
.modal .btn-close:hover {
	background-color: var(--brand-soft);
	color: var(--brand-cta-hover);
}
.modal .btn-icon[data-kt-users-modal-action="close"] .svg-icon,
.modal .btn-icon[data-kt-users-modal-action="close"] i,
.modal .btn-icon[data-kt-child-modal-action="close"] .svg-icon,
.modal .btn-icon[data-kt-child-modal-action="close"] i,
.modal .btn-icon[data-bs-dismiss="modal"] .svg-icon,
.modal .btn-icon[data-bs-dismiss="modal"] i {
	color: inherit !important;
}
.menu.menu-sub.menu-sub-dropdown {
	border: 1px solid var(--ho-line);
	border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(16,24,48,.18);
}
/* dropdown items — one consistent treatment whether the action is an <a>
   (with or without href) or a <button> that opens a modal */
.menu.menu-sub.menu-sub-dropdown .menu-item .menu-link {
	color: var(--ho-body);
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
}
.menu.menu-sub.menu-sub-dropdown .menu-item button.menu-link {
	background: transparent;
	border: 0;
	width: 100%;
	text-align: left;
	display: flex;
}
.menu.menu-sub.menu-sub-dropdown .menu-item .menu-link:hover:not(.disabled):not(.active) {
	background-color: var(--brand-soft) !important;
	color: var(--brand-cta-hover) !important;
}
.menu.menu-sub.menu-sub-dropdown .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title {
	color: var(--brand-cta-hover) !important;
}

/* ---- tables ---- */
.table > :not(caption) > * > * {
	border-bottom-color: var(--ho-line-2);
}
table.dataTable thead th {
	color: var(--ho-faint);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ---- scrolltop ---- */
.scrolltop {
	background-color: var(--brand-cta);
	border-radius: 12px;
}

/* ---- scrollbars ---- */
::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}
::-webkit-scrollbar-thumb {
	background: rgba(16,24,48,.16);
	border-radius: 20px;
	border: 2px solid transparent;
	background-clip: content-box;
}

/* ---- responsive polish ---- */
@media (max-width: 991.98px) {
	.card {
		border-radius: 16px;
	}
	.card .card-body {
		padding: 1.75rem 1.5rem;
	}
	/* drawer sidebar keeps the white treatment and gets depth */
	.app-sidebar.drawer.drawer-on {
		box-shadow: 20px 0 60px rgba(0,0,0,.3);
	}
}
/* cards using Metronic's "mb-md-N mb-xl-N" pattern have NO bottom margin below
   768px, so stacked dashboard cards touch — give them a mobile gap */
@media (max-width: 767.98px) {
	.card[class*="mb-md-"],
	.card[class*="mb-xl-"] {
		margin-bottom: 1.25rem;
	}
}
/* several listing tables (e.g. jobs) have no .table-responsive wrapper, so a
   wide table blows the page/card width at ANY viewport size. Flex ancestors
   default to min-width:auto and grow to the table's natural width, so they
   must be constrained before the wrapper's own scroll can work. Applies at
   all widths — the scrollbar only appears when the table doesn't fit. */
.app-wrapper,
.app-main,
.app-content,
.app-container,
#kt_app_content,
#kt_app_content_container {
	min-width: 0;
	max-width: 100%;
}
.card {
	max-width: 100%;
}
.card-body {
	min-width: 0;
}
.dataTables_wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.dataTables_wrapper > .table {
	min-width: 100%;
}
@media (min-width: 992px) {
	.card .card-body {
		padding: 2rem 2.25rem 2.5rem;
	}
}

/* ============================================================
   PROFILE PAGE COMPONENTS (design_handoff_my_profile)
   Hero card + detail/security panels shared by the admin
   My Profile page and the jobseeker profile page.
   ============================================================ */

/* centred content wrap — design caps content at 1100px */
.ho-wrap {
	max-width: 1100px;
	margin: 0; /* 2026 refresh update: capped content is LEFT-justified site-wide */
	width: 100%;
	padding-top: 8px;
}
/* when ho-wrap sits on the content container itself (alerts/applications/dash
   listings), it must outrank the ID-specificity max-width:100% in the
   DataTables containment block above */
#kt_app_content_container.ho-wrap {
	max-width: 1100px;
}

/* Left-justified variant (admin pages) — same 1100px cap, hugs the left of
   the content container instead of centring */
.ho-wrap.ho-left {
	margin: 0;
}

/* breadcrumb */
.ho-crumb {
	font-size: 15px;
	color: var(--ho-faint);
	font-weight: 600;
	margin-bottom: 18px;
}
.ho-crumb a {
	color: var(--ho-faint);
}
.ho-crumb a:hover {
	color: var(--ho-muted);
}
.ho-crumb .here {
	color: var(--brand-cta);
}

/* hero card — .card is flex-column in Metronic, so force the row layout */
.ho-hero {
	padding: 26px 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	margin-bottom: 24px;
}
.ho-ava {
	width: 96px;
	height: 96px;
	border-radius: 24px;
	background: linear-gradient(135deg, var(--brand-cta), var(--brand-grad-2));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 34px;
	font-weight: 800;
	flex-shrink: 0;
	overflow: hidden;
}
.ho-ava img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ho-hero .ho-name {
	font-size: 24px;
	font-weight: 800;
	color: var(--ho-ink);
	letter-spacing: -.02em;
}
.ho-hero .ho-name .handle {
	font-size: 16px;
	font-weight: 600;
	color: var(--ho-faint);
}
.ho-grow {
	flex: 1;
	min-width: 0;
}

/* brand pill badge */
.ho-badge {
	display: inline-block;
	padding: 5px 14px;
	background: var(--brand-soft);
	color: var(--brand-cta-hover);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* two-column content grid */
.ho-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}
.ho-grid > .ho-span-2 {
	grid-column: 1 / -1;
}

/* panel card interior */
.ho-panel {
	padding: 28px 30px;
}
.ho-panel h2 {
	font-size: 24px;
	font-weight: 800;
	color: var(--ho-ink);
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.ho-panel h2 .lead-icon {
	color: var(--brand-cta);
	font-size: 24px;
	line-height: 1;
	width: 28px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ho-panel .sub {
	font-size: 15px;
	color: var(--ho-faint);
	margin: -14px 0 16px;
}

/* soft square edit (pencil) button */
.ho-edit {
	margin-left: auto;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--ho-soft-btn);
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ho-muted);
	flex-shrink: 0;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.ho-edit:hover {
	background: var(--brand-soft);
	color: var(--brand-cta-hover);
}
.ho-edit i {
	font-size: 15px;
	color: inherit;
}

/* label/value field */
.ho-field {
	margin-bottom: 20px;
}
.ho-field:last-child {
	margin-bottom: 0;
}
/* label sizing/weight comes from the fs-6 fw-semibold utilities in the markup,
   matching Metronic's standard label treatment */
.ho-field .k {
	color: var(--ho-ink);
	margin-bottom: 5px;
}
.ho-field .v {
	font-size: 1.075rem;
	color: var(--ho-body);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

/* tables inside panels follow the label/value treatment */
.ho-panel .table th {
	color: var(--ho-ink);
}
.ho-panel .table td {
	color: var(--ho-body);
}

/* security-style row */
.ho-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ho-line-2);
}
.ho-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.ho-row .k {
	color: var(--ho-ink);
}
.ho-row .v {
	font-size: 1.075rem;
	color: var(--ho-body);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* hero primary button matches design CTA */
.ho-hero .btn-primary {
	white-space: nowrap;
}

/* ---- mobile drawer (sidebar) — ~90% width (kept in sync with
   data-kt-drawer-width on the sidebar element, which is what the
   drawer JS actually applies as an inline !important style) ---- */
@media (max-width: 991.98px) {
	.app-sidebar.drawer {
		width: min(380px, 94vw) !important;
	}
}

/* mobile hamburger — mirrors the 44px header avatar, heading-colour icon
   (!important needed to beat the w-35px/h-35px utility classes) */
#kt_app_sidebar_mobile_toggle,
#ho_sidebar_open {
	width: 44px !important;
	height: 44px !important;
	border-radius: 12px;
	color: var(--ho-ink) !important;
}
#kt_app_sidebar_mobile_toggle .svg-icon,
#kt_app_sidebar_mobile_toggle .svg-icon svg,
#ho_sidebar_open .svg-icon,
#ho_sidebar_open .svg-icon svg {
	color: var(--ho-ink) !important;
}
#kt_app_sidebar_mobile_toggle .svg-icon svg,
#ho_sidebar_open .svg-icon svg {
	width: 40px;
	height: 40px;
}
/* the burger svg is duotone (two paths at .3 opacity) — force all three lines solid */
#kt_app_sidebar_mobile_toggle .svg-icon svg path,
#ho_sidebar_open .svg-icon svg path {
	opacity: 1 !important;
}
/* hold the same burger size at every mobile width — no breakpoint may shrink it */
@media (max-width: 991.98px) {
	#kt_app_sidebar_mobile_toggle {
		width: 44px !important;
		height: 44px !important;
	}
	#kt_app_sidebar_mobile_toggle .svg-icon,
	#kt_app_sidebar_mobile_toggle .svg-icon svg {
		width: 40px !important;
		height: 40px !important;
	}
}
#kt_app_sidebar_mobile_toggle:hover,
#ho_sidebar_open:hover {
	background-color: var(--brand-soft);
	color: var(--brand-cta-hover) !important;
}
#kt_app_sidebar_mobile_toggle:hover .svg-icon svg,
#ho_sidebar_open:hover .svg-icon svg {
	color: var(--brand-cta-hover) !important;
}

/* header avatar — initials on brand gradient (design: 44px, rounded-12) */
.ho-top-ava {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--brand-cta), var(--brand-grad-2));
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
}

/* drawer close (X) button — mobile only via d-lg-none */
.ho-side-close {
	background: transparent;
	border: 0;
	color: var(--ho-side-ink);
	padding: 6px;
	line-height: 1;
	cursor: pointer;
}
.ho-side-close:hover {
	color: var(--ho-side-ink);
}

/* sidebar user chip (mobile drawer header) — translucent card on the dark rail */
.ho-side-user {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 14px 4px;
	padding: 12px 14px;
	background: var(--ho-side-hover);
	border-radius: 14px;
}
.ho-side-user .ava {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--brand-cta), var(--brand-grad-2));
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ho-side-user .nm {
	font-weight: 800;
	color: var(--ho-side-ink);
	font-size: 15px;
	line-height: 1.25;
}
.ho-side-user .rl {
	color: var(--ho-side-faint);
	font-weight: 600;
	font-size: 15px;
}

/* responsive: stack + full-width CTA */
@media (max-width: 991.98px) {
	.ho-grid {
		grid-template-columns: 1fr;
	}
	.ho-hero {
		flex-direction: column;
		text-align: center;
		padding: 24px 20px;
	}
	.ho-hero .ho-name .handle {
		display: block;
		margin-top: 2px;
	}
	.ho-hero .btn-primary {
		width: 100%;
		justify-content: center;
	}
	.ho-panel {
		padding: 22px 20px;
	}
}

/* =========================================================
   card listings (job alerts & applications)
   replaces the DataTables rows on the jobseeker list pages
   ========================================================= */
.ho-cardlist {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ho-itemcard {
	background: #fff;
	border: 1px solid var(--kt-border-color, #e4e7ec);
	border-radius: 12px;
	padding: 20px 22px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.ho-itemcard .ho-grow {
	flex: 1 1 auto;
	min-width: 0;
}
.ho-itemcard .titleline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-bottom: 8px;
}
.ho-itemcard .t {
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 800;
	color: var(--ho-ink);
	line-height: 1.25;
	overflow-wrap: anywhere;
}
a.t {
	text-decoration: none;
}
a.t:hover {
	color: var(--brand-cta-hover);
}
.ho-itemcard .ho-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 1.075rem;
	color: #4b5565;
}
.ho-meta .m {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.ho-meta .m i {
	color: var(--ho-faint);
	font-size: 16px;
	line-height: 1;
}

/* always-visible actions: pencil (ho-edit) + red-tinted delete */
.ho-itemcard .ho-actions {
	display: flex;
	gap: 8px;
	flex: none;
}
.ho-actions .ho-edit {
	margin-left: 0;
}
.ho-del {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--ho-soft-btn);
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #4b5565;
	cursor: pointer;
}
.ho-del:hover {
	background: rgba(220, 38, 38, .10);
	color: #b91c1c;
}
.ho-del i {
	font-size: 15px;
	color: inherit;
}

/* alerts: two cards per row, stacking below tablet */
.ho-cardlist.ho-2col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ho-2col .ho-empty {
	grid-column: 1 / -1;
}
@media (max-width: 767.98px) {
	.ho-cardlist.ho-2col {
		grid-template-columns: 1fr;
	}
}

/* empty state shown instead of a blank table */
.ho-empty {
	background: #fff;
	border: 1px solid var(--kt-border-color, #e4e7ec);
	border-radius: 12px;
	padding: 34px 22px;
	text-align: center;
}
.ho-empty .big {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 800;
	color: var(--ho-ink);
	margin-bottom: 4px;
}
.ho-empty .sub {
	font-size: 15px;
	color: var(--ho-faint);
	margin-bottom: 16px;
}

@media (max-width: 767.98px) {
	.ho-itemcard {
		padding: 18px;
	}
}

/* =========================================================
   recommended jobs (jobseeker dashboard)
   job cards matched to the first alert via the jBoard API
   ========================================================= */

/* bigger h2s site-wide (2026 refresh sizing) */
h2, .h2 {
	font-size: 2.4rem;
}

/* page titles (h1.page-heading) match the h2 size; !important beats the fs-3/fs-1 utilities on them */
h1.page-heading {
	font-size: 2.4rem !important;
}

/* orange lead icon beside card headings */
.ho-h2-icon {
	color: var(--brand-cta);
	font-size: 22px;
	margin-right: 10px;
	vertical-align: -2px;
}

/* 3-up grid for job cards: 3 → 2 → 1 as the viewport narrows */
.ho-cardlist.ho-3col {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ho-3col .ho-empty {
	grid-column: 1 / -1;
}
@media (max-width: 1199.98px) {
	.ho-cardlist.ho-3col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767.98px) {
	.ho-cardlist.ho-3col {
		grid-template-columns: 1fr;
	}
}

.ho-jobcard {
	position: relative;
	padding-bottom: 80px;
}
.ho-jobcard .ho-newrow {
	margin: 2px 0 6px;
}
.ho-jobcard .ho-emp {
	font-size: 1.075rem;
	font-weight: 600;
	color: #4b5565;
	margin-bottom: 8px;
}
.ho-logochip {
	flex: none;
	width: 96px;
	height: 72px;
	border: 1px solid var(--kt-border-color, #e4e7ec);
	border-radius: 8px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 5px;
}
.ho-logochip img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.ho-logochip.ho-logofallback {
	background: var(--ho-soft-btn);
	border: 0;
	border-radius: 12px;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: .04em;
	color: var(--ho-ink);
}

/* view job button — compact, left-aligned to the card content on desktop
   (22px = .ho-itemcard side padding), full width on mobile; pinned to the
   card base so every card matches */
.ho-viewjob {
	position: absolute;
	left: 22px;
	bottom: 16px;
	width: fit-content;
	min-width: 102px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--brand-grad-2), var(--brand-cta));
	color: #fff !important;
	border-radius: 9px;
	padding: 5px 15px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(16, 24, 40, .10);
}
@media (max-width: 767.98px) {
	.ho-viewjob {
		width: auto;
		left: 18px;
		right: 18px;
	}
}
.ho-viewjob:hover {
	background: var(--brand-cta-hover);
	color: #fff !important;
}

/* see more — quiet outline button */
.ho-morejobs {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--kt-border-color, #e4e7ec);
	color: var(--brand-cta);
	font-weight: 700;
	font-size: 15px;
	border-radius: 10px;
	padding: 12px 26px;
	text-decoration: none;
}
.ho-morejobs:hover {
	background: var(--brand-cta);
	border-color: var(--brand-cta);
	color: #fff;
}

.ho-recsub {
	font-size: 1.075rem;
	color: var(--ho-faint);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.ho-recsub b {
	color: #4b5565;
}
.ho-loadmore {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}



/* START: Applicant card meta line (distance + salary expectation) */
.card.application .application-meta {
	font-size: 12px;
	line-height: 16px;
	color: var(--ho-muted, #68707f);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: -2px 0 4px 19px;
}
.card.application .application-meta .application-meta-sep {
	margin: 0 5px;
	color: var(--ho-faint, #98a0af);
}
/* END: Applicant card meta line */

/* START: Candidate notes modal */
#notes-list .note-item {
	border-top: 1px solid var(--ho-line, #eef1f6);
	padding: 10px 2px;
}
#notes-list .note-item:first-child {
	border-top: 0;
}
#notes-list .note-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
}
#notes-list .note-author {
	font-weight: 600;
	color: var(--ho-ink, #000E2C);
	font-size: 13px;
}
#notes-list .note-date {
	color: var(--ho-faint, #98a0af);
	font-size: 12px;
	flex-grow: 1;
}
#notes-list .note-delete {
	color: var(--ho-faint, #98a0af);
	height: 24px;
	width: 24px;
}
#notes-list .note-delete:hover {
	color: #d9214e;
}
#notes-list .note-text {
	font-size: 14px;
	color: var(--ho-body, #000);
	white-space: pre-wrap;
	word-break: break-word;
}
/* END: Candidate notes modal */

/* START: Chip (tag) inputs — screening modal emails/phones */
.chip-input {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	cursor: text;
	height: auto;
	min-height: 38px;
	padding: 5px 8px;
}
.chip-input .chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #f1f3f6;
	border: 1px solid var(--ho-line, #eef1f6);
	border-radius: 20px;
	padding: 3px 6px 3px 11px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ho-ink, #000E2C);
	max-width: 100%;
	overflow: hidden;
}
.chip-input .chip .chip-remove {
	border: 0;
	background: transparent;
	color: var(--ho-faint, #98a0af);
	font-size: 15px;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer;
}
.chip-input .chip .chip-remove:hover {
	color: #d9214e;
}
.chip-input .chip-input-entry {
	border: 0;
	outline: 0;
	flex-grow: 1;
	min-width: 140px;
	font-size: 13px;
	background: transparent;
	padding: 3px 2px;
}
.chip-input .chip-input-entry.chip-input-invalid {
	color: #d9214e;
}
/* END: Chip (tag) inputs */