body.jobs-page {
	background: var(--gray-50);
}

h3.jobs-page {
	font-size: 1.7rem;
}

h4.jobs-page {
	font-size: 1.35rem;
}

.text-18 {
	font-size: 18px;
}

.text-17 {
	font-size: 17px;
}

.text-15 {
	font-size: 15px;
}

.text-14 {
	font-size: 14px;
}

.text-13 {
	font-size: 13px;
}

.text-12 {
	font-size: 12px;
}

.full-time-badge {
	background: var(--bg-green);
	color: var(--text-on-green);
	border-radius: var(--border-radius);
}

.part-time-badge {
	background: var(--bg-orange);
	color: var(--text-on-orange);
	border-radius: var(--border-radius);
}

.other-badge {
	background: var(--bg-blue);
	color: var(--text-on-blue);
	border-radius: var(--border-radius);
}

.order-item:active {
	background-color: var(--gray-200);
}

.job-card-footer {
	background: var(--gray-100);
	border-radius: 0 0 0.75rem 0.75rem;
}

.search-box-container {
	width: 100%;
}

#search-box {
	padding-left: 36px;
	background-color: var(--bg-color);
}

.search-bar .search-icon {
	position: absolute;
	margin-left: 12px;
	display: flex;
	align-items: center;
	height: 100%;
}

.filters-section .title-section {
	border-bottom: 1px solid var(--gray-300);
}

.filters-drawer {
	height: 80vh;
	bottom: -80vh;
	display: flex;
	flex-direction: column;
	left: 0;
	transition: bottom 0.3s ease;
	box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.1);
	border-radius: 16px 16px 0px 0px;
	z-index: 5 !important;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	display: none;
	z-index: 3 !important;
}

.custom {
	.page-breadcrumbs.container>div {
		display: flex;
		flex-wrap: wrap;
		/* flex-direction: column-reverse; */
		margin-left: -15px;
		margin-right: -15px;

		& .banner {
			background-image: url('https://uat-metub.frappe.cloud/files/20250404-095258.jpg');
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			min-height: 75px;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 10px;

			img {
				/* height: 20%; */
				/* width: 50%; */
				margin-left: -15px;
				/* width: 40%; */
				margin-right: -15px;
			}
		}

		@media (min-width: 576px) {
			.banner {
				/* height: 70%; */

				img {
					width: 20%;
					/* height: 20%; */
					margin-left: 0;
					margin-right: 0;
				}
			}

			flex-direction: column;


		}


	}

}

[source-type=Generator] .custom {
	.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
		content: var(--right-arrow-svg);
		display: inline-block;
		padding-top: 6px;
	}
}