/* 1) Theme variables you can tweak once */
:root {
  --sb-size: 3px;
  --sb-radius: 999px;

  --sb-thumb: #122947;   /* thumb color */
  --sb-thumb-hover: #8a93a1;
  --sb-track: rgba( 0, 0, 0, 0.03 );   /* track color */
  --sb-corner: transparent;
}

/* Optional dark mode */
/* @media (prefers-color-scheme: dark) {
  :root {
    --sb-thumb: #5b6370;
    --sb-thumb-hover: #6b7482;
    --sb-track: #1e2126;
  }
} */

/* 2) GLOBAL: style scrollbars on the whole page */
html {
  /* Firefox */
  scrollbar-width: thin;                           /* auto | thin | none */
  scrollbar-color: var(--sb-thumb) var(--sb-track);/* thumb track */
}

/* WebKit (Chrome, Edge, Safari, Opera) */
* {
  scrollbar-width: thin; /* Firefox also honors on elements */
}
*::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}
*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: var(--sb-radius);
  /* creates a gap between thumb & track edges (looks nicer) */
  border: 2px solid var(--sb-track);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
}
*::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: var(--sb-radius);
}
*::-webkit-scrollbar-corner {
  background: var(--sb-corner);
}

/* 3) OPTIONAL: a utility class for scrollable containers */
.scrollable {
  overflow: auto;
  max-height: 320px;
}

/* Make a slightly thicker thumb on hover (WebKit only) */
.scrollable:hover::-webkit-scrollbar-thumb {
  border-width: 1px;
}

/* 4) OPTIONAL: hide scrollbars but keep scroll (e.g., carousels) */
.scroll-hidden {
  overflow: auto;
  scrollbar-width: none;            /* Firefox */
}
.scroll-hidden::-webkit-scrollbar { /* WebKit */
  display: none;
}

/**career filters**/
.career-filters {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	gap: 30px;
	margin-bottom: 50px;
}
.career-filters .search-box {
	position: relative;
	width: 560px;
	max-width: 50%;
	justify-self: flex-start;
	margin: 0 auto 0 0;
}
@media all and ( max-width: 1023px ) {
	.career-filters .search-box {
		max-width: 100%;
	}
	.career-filters .stylish-dopdown-wrap {
		width: 100%
	}
}
.career-filters .search-box,
.career-filters button{
	border: none !important;
}
.career-filters .search-box,
.career-filters button{
	background: #EAF5FB 0% 0% no-repeat padding-box;
	border-radius: 21px; 
	outline: none;
}
.career-filters .search-box input {
	width: 100%;
	padding: 10px 35px 10px 25px;
	border: none;
	border-radius: 20px;
	font-size: 14px;
	height: 100%;
	min-height: 1.2em;
	background-color: transparent;
}

.search-box .icon {
	position: absolute;
	right: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	font-size: 16px;
	color: #666;
	pointer-events: none;
}
.career-filters .search-box input::-webkit-input-placeholder {
	font: normal normal normal 16px/25px Open Sans;
	letter-spacing: 0px;
	color: #122947;
}
.career-filters .search-box input::-moz-placeholder {
	font: normal normal normal 16px/25px Open Sans;
	letter-spacing: 0px;
	color: #122947;
}
.career-filters .search-box input:-ms-input-placeholder {
	font: normal normal normal 16px/25px Open Sans;
	letter-spacing: 0px;
	color: #122947;
}
.career-filters .search-box input::-ms-input-placeholder {
	font: normal normal normal 16px/25px Open Sans;
	letter-spacing: 0px;
	color: #122947;
}
.career-filters .search-box input::placeholder,
.career-filters .stylish-dopdown,
.listing-dropdown-filter .stylish-dopdown {
	font: normal normal normal 16px/25px Open Sans;
	letter-spacing: 0px;
	color: #122947;
}
.stylish-dopdown .selected-text {
	font-size: 0.8em;
    padding: 0.4em 1em;
    line-height: 1;
    border-radius: 1em;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}
.stylish-dopdown {
	width: 100%;
	padding: 10px 25px;
}
.stylish-dopdown + .stylish-dopdown-box {
	min-width: 250px;
	z-index: 99;
}
.stylish-dopdown input.radio-as-checkbox[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 1em;
	height: 1em;
	border: 1px solid #ccc;
	border-radius: 4px; /* square like checkbox */
	display: inline-block;
	position: relative;
	cursor: pointer;
	line-height: 1em;
}

.stylish-dopdown input.radio-as-checkbox[type="radio"]:checked {
	background-color: #2563eb; /* blue like Tailwind's primary */
	border-color: #2563eb;
}

.stylish-dopdown input.radio-as-checkbox[type="radio"]:checked::after {
	content: "✓";
	color: white;
	font-size: 12px;
	position: absolute;
	top: 0;
	left: 3px;
}
.career-app .career-division-filter > button.stylish-dopdown > div:first-child:before,
.career-app .career-sorting-filter > button.stylish-dopdown > div:first-child:before {
	content: "Filter: ";
	display: inline;
}
/* multi select */
.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.justify-between {
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.relative {
	position: relative;	
} 
.absolute {
	position: absolute;
}
.inline-block {
	display: inline-block
}
.multiselect {
	display:inline-block;
	position:relative;
	min-width:220px;
}

.multiselect__button{
	width:100%;
	text-align:left;
	padding:8px 12px;
	border:1px solid var(--border);
	border-radius:var(--radius);
	background:var(--bg);
	cursor:pointer;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
	-webkit-box-shadow: none;
	        box-shadow: none;
}

.multiselect__summary{
	display:-webkit-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	gap:6px;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	max-width: 70%;
	font-size:14px;
	color:var(--muted);
}

.tag {
	background:#f1f5f9;
	padding:3px 8px;
	border-radius:999px;
	font-size:12px;
	color:#111827;
}

.caret{ margin-left:12px; opacity:.7; }

.multiselect__panel{
	position:absolute;
	left:0;
	right:0;
	margin-top:8px;
	padding:8px;
	border-radius:8px;
	background:var(--bg);
	border:1px solid var(--border);
	-webkit-box-shadow:var(--shadow);
	        box-shadow:var(--shadow);
	z-index:100;
	max-height:220px;
	overflow:auto;
	display:none;
}

.multiselect__panel[aria-hidden="false"]{ display:block; }

.option{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	gap:8px;
	padding:6px 8px;
	border-radius:6px;
	cursor:pointer;
}
.option:focus{ outline:2px solid rgba(37,99,235,0.12); }
.option:hover{ background:#fbfdff; }

.controls{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	gap:8px;
	padding:6px 8px;
	border-bottom:1px dashed var(--border);
	margin-bottom:6px;
}
.btn{
	padding:6px 8px;
	font-size:13px;
	border-radius:6px;
	border:1px solid var(--border);
	background:#fff;
	cursor:pointer;
}
.btn--primary{
	border-color:var(--accent);
	color:var(--accent);
	font-weight:600;
}

/* tiny accessibility helpers */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Category button radios */
.career-categories {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	gap: 30px;
	margin-bottom: 50px;
}
.career-category-option {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.career-category-option input[type="radio"] {
  display: none;
}
.career-category-option span {
	padding: 10px 30px;
	background: #EAF5FB;
	border-radius: 21px;
	font: normal normal normal 16px / 25px Open Sans;
	color: #122947;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.career-category-option:hover span { background: #eee; }
.career-category-option input[type="radio"]:checked + span {
	background: #2C9AD8;
	color: #FFFFFF;
}

/* Grid / slider container */
.career-list {
	--gap: 100px;
	--columns: 5;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	gap: var(--gap);
	border-top: 1px solid #122947;
	padding-top: 50px;
}
/* Slick adjustments */
.slick-slide { padding: 0 8px; }
.slick-dots { margin-top: 10px; }

/* Card */
.career-card {
	overflow: hidden;
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
	        flex: 0 0 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-flow: column;
	        flex-flow: column;
	background: transparent;
}
.team-list .slick-track {
	display: flex;
	flex-flow: row;
	align-items: stretch;
}
.team-list .slick-track .team-card {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex: 0 0 auto;
	height: inherit;
}
.career-card .career-avatar {
	display: inline-block;
	padding-top: 56%;
	width: 100%;
}
.career-card .career-avatar,
.career-name {
		cursor: pointer;
		transition: all .25s ease-in-out; 
}
.career-card .career-avatar {
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 15px;
}
.career-card .career-avatar.skeleton { 
	background: #eee;
	margin: 0;
}
/* .career-card .career-avatar.skeleton:before,
.career-card .career-avatar.skeleton:before {
	content: '';
	display: block;
	padding-top: 100%;
} */
.career-card .career-body {
/* 	background: #EAF5FB;
	padding: 26px 17px;
    text-align: center; */
	margin-top: 13px;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    width: 100%;
	gap: 30px;
}
.career-card .career-short-info {
	gap: 5px;
}
.career-card .career-name,
.career-card .career-position,
.career-modal .career-position,
.career-card .career-description{
	padding: 0;
}
.career-card .career-name { 
    font: normal normal bold 16px/25px Josefin Sans;
	letter-spacing: 0px;
	color: #122947;
	text-transform: uppercase;
}
.career-card .career-description {
	font: normal normal normal 14px/25px Open Sans;
	letter-spacing: 0px;
	color: #122947;
}
.career-card .career-requirements {
	font: italic normal normal 12px/25px Open Sans;
	letter-spacing: 0px;
	color: #2C9AD8;
}
.career-short-info > div:first-child {
	display: flex;
    flex-flow: row wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}
.career-modal .career-position,
.career-card .career-position { 
	font: normal normal normal 16px / 30px Open Sans;
    color: #2C9AD8;
}
.career-card .career-button {
	border: 0;
	cursor: pointer;
}

/* Pagination */
.career-pagination {
	margin-top: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.career-pagination .career-page {
	padding: 0.5em;
	border: 1px solid #EAF5FB;
	background: #EAF5FB;
	border-radius: 6px;
	min-width: 2.5em;
	min-height: 2.5em;
}
.career-pagination .career-page.is-active {
	background: #122947; color: #fff; border-color: #122947;
}
.career-pagination .career-page,
.career-pagination .prev-button,
.career-pagination .next-button{
	line-height: 1em;
	font-size: 14px;	
}
.team-pagination .prev-button,
.team-pagination .next-button {
	border: none;
	background-color: transparent;
}
/* Skeleton loader */
.skeleton {
	background: -webkit-gradient(linear, left top, right top, color-stop(25%, #f0f0f0), color-stop(50%, #e6e6e6), color-stop(75%, #f0f0f0));
	background: -o-linear-gradient(left, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
	background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	-webkit-animation: shimmer 1.5s infinite;
	        animation: shimmer 1.5s infinite;
	border-radius: 6px;
}
@-webkit-keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Modal */
.career-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.7);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	z-index: 99999;
}
.career-modal-data-wrap {
  text-align: center;
}
.career-modal {
	background: #fff;
	padding: 45px;
	border-radius: 8px;
	max-width: 1024px;
	width: 92%;
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
	-webkit-box-shadow: 0 10px 30px rgba(0,0,0,.2);
	        box-shadow: 0 10px 30px rgba(0,0,0,.2);
	display: -webkit-box;
	display: -ms-flexbox;
	
}
.career-modal .modal-inner {
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row;
	        flex-flow: row;
	gap: 50px;
	max-height: 100%;
	overflow-x: auto;
}
.career-modal .modal-inner > * {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 50%;
	        flex: 1 1 50%;
}

.career-modal-avatar {
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 15px;
	min-width: 200px;
	background-size: cover;
}
.career-modal-avatar:before {
	content: "";
	display: block;
	padding-top: 70%;
}
.career-divisions {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
}
.carrer-modal-message-wrap {
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid #122947;
}
.carrer-modal-message-wrap .career-message {
	font: italic normal 600 16px/25px Open Sans;
	letter-spacing: 0px;
	color: #122947;
	text-transform: none;
	padding: 0;
}
.career-divisions .career-division {
	font: normal normal bold 12px/14px Josefin Sans;
	letter-spacing: 0.24px;
	color: #FFFFFF;
	background: #2C9AD8 0% 0% no-repeat padding-box;
	border-radius: 8px;
	padding: 5px 15px 2px 16px;
	text-transform: uppercase;
}
.career-modal-actions {
	margin-top: 25px;
	text-align: left;
}
.submit-application {
	font: normal normal 600 14px/18px Josefin Sans;
	letter-spacing: 1.82px;
	color: #122947;
	display: flex;
	gap: 1em;
}

.career-modal .career-position{
	font: normal normal 600 16px/25px Open Sans;
	letter-spacing: 0px;
	color: #2C9AD8;
}
.career-modal .career-modal-details-wrap .career-about-title{
	font: italic normal 600 16px/25px Open Sans;
	letter-spacing: 0px;
	color: #2C9AD8;
}
.career-modal .career-modal-details-wrap .career-about-wrapper {
	margin-top: 38px;
}
.career-modal .career-modal-details-wrap .career-about-wrapper .career-content{
	max-height: 300px;
	overflow: auto;
	font: normal normal normal 16px/28px Open Sans;
	letter-spacing: 0px;
	color: #122947;
}
.career-content {
	margin-top: 10px;
}
.career-close {
	position: absolute;
	top: 10px;
	right: 10px;
	border: none;
	background: transparent;
	color: #122947;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 16px;
	cursor: pointer;
	font-size: 32px;
}
.career-close:hover { color: #000; }
@media screen and ( max-width: 767px ) {
	.career-modal .modal-inner {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
	}
	.career-modal .career-modal-details-wrap .career-about-wrapper .career-content{
		max-height: unset;
	}
}
/* Desktop-only grid; mobile gets slick */
@media (max-width: 1024px) {
  .career-list { display: block; } /* slick handles layout */
}

.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

.career-card .career-name:hover {
    color: var(--primary-colour);
}
.career-card .career-avatar-container { overflow:hidden; border-radius: 15px;     max-height: 243px; }
.career-card:hover .career-avatar  {
	transform: scale(1.2);
}   
@media(min-width: 1024px) and (max-width: 1699px) {
	.career-card .career-name {
		font-size: 15px;
	}
	.career-divisions .career-division { font-size:11px; }
}