@layer components {
.employeeFilter {
	margin-bottom: 75px;
}

	@media (max-width: 767px) {
.employeeFilter {
		margin-bottom: 35px
}
	}

	.employeeFilter #employeeFilterForm {
		display: flex;
		gap: 30px;
	}

		@media (max-width: 767px) {

	.employeeFilter #employeeFilterForm {
			flex-direction: column
	}
		}

		.employeeFilter #employeeFilterForm .name {
			--icon-size: 32px;
			--mask: url('https://api.iconify.design/material-symbols/search.svg') no-repeat center / cover;
			--top: 13px;
		}

		.employeeFilter #employeeFilterForm .department,
		.employeeFilter #employeeFilterForm .name {
			flex: 1;
			max-width: 430px;
			position: relative;
		}

			.employeeFilter #employeeFilterForm .department label::after, .employeeFilter #employeeFilterForm .name label::after {
				position: absolute;
				content: '';
				top: var(--top, 18px);
				right: 20px;
				width: var(--icon-size, 24px);
				aspect-ratio: 1;
				-webkit-mask: var(--mask, url('https://api.iconify.design/mdi/chevron-down.svg') no-repeat center / cover);
				        mask: var(--mask, url('https://api.iconify.design/mdi/chevron-down.svg') no-repeat center / cover);
				background: var(--icon-color, var(--color-primary));
				pointer-events: none;
			}

		.employeeFilter #employeeFilterForm input,
		.employeeFilter #employeeFilterForm select {
			z-index: 2;
			width: 100%;
			font-size: 18px;
			color: #000;
			background: #fff;
			border: 1px solid #bdbdbd;
			border-radius: 10px;
			padding: 18px 20px;
			cursor: pointer;
			transition: border-color 0.4s ease;
			outline: none;
			-webkit-appearance: none;
		}

			.employeeFilter #employeeFilterForm input::-webkit-search-cancel-button, .employeeFilter #employeeFilterForm select::-webkit-search-cancel-button {
				-webkit-appearance: none;
				display: none;
			}

			.employeeFilter #employeeFilterForm input:hover,
			.employeeFilter #employeeFilterForm input:focus,
			.employeeFilter #employeeFilterForm select:hover,
			.employeeFilter #employeeFilterForm select:focus {
				border-color: var(--border-color-hover, var(--color-primary));
			}
}
@layer components {
.employeeCard.v2 {
	display: flex;
	flex-direction: column;
	gap: 7px;
	max-width: 313px;
	width: 100%;
}

	@media (max-width: 991px) {
.employeeCard.v2 {
		padding-inline: 20px
}
	}

	.employeeCard.v2 img {
		width: 140px;
		aspect-ratio: 1;
		-o-object-fit: cover;
		   object-fit: cover;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 17px;
	}

	.employeeCard.v2 .content {
		display: flex;
		flex-direction: column;
		gap: 7px;
		font-size: 18px;
	}

		@media (max-width: 480px) {

	.employeeCard.v2 .content {
			font-size: 16px
	}
		}

	.employeeCard.v2 .name {
		font-size: var(--name-font-size, 22px);
		font-weight: var(--name-font-weight, 500);
	}

		@media (max-width: 480px) {

	.employeeCard.v2 .name {
			font-size: var(--name-font-size-mobile, 20px)
	}
		}

	.employeeCard.v2 .jobTitle {
		padding-block: 4px;
	}

	.employeeCard.v2 a {
		--link-color: var(--text-color, #000);
		display: flex;
		align-items: center;
		gap: 10px;
		padding-block: 4px;
		border-bottom: none;
	}

		.employeeCard.v2 a::before {
			content: '';
			width: 24px;
			height: 24px;
			background: var(--color-primary);
			-webkit-mask-size: 100%;
			        mask-size: 100%;
			-webkit-mask-repeat: no-repeat;
			        mask-repeat: no-repeat;
		}

		.employeeCard.v2 a:hover {
			color: var(--color-primary);
			text-decoration: underline;
		}

	.employeeCard.v2 .email a::before {
		-webkit-mask-image: url('https://api.iconify.design/material-symbols-light/mail-outline.svg');
		        mask-image: url('https://api.iconify.design/material-symbols-light/mail-outline.svg');
	}

	.employeeCard.v2 .phone a::before {
		-webkit-mask-image: url('https://api.iconify.design/material-symbols-light/call.svg');
		        mask-image: url('https://api.iconify.design/material-symbols-light/call.svg');
	}
}
@layer components {
	.employeesContainer.v2:has(.employeeCard.v1) {
		--grid-gap: 40px;
	}

		@media (min-width: 992px) {
	.employeesContainer.v2:has(.employeeCard.v1) {
			--grid-width: 430px
	}
		}

	.employeesContainer.v2:has(.employeeCard.v3) {
		--grid-gap: 30px;
	}

		@media (min-width: 992px) {

	.employeesContainer.v2:has(.employeeCard.v3) {
			--grid-width: 270px;
			--grid-gap: 68px 30px
	}
		}

	.employeesContainer.v2 {

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--grid-width, 313px), 1fr));
	grid-gap: var(--grid-gap, 43px 147px);
	margin-bottom: 40px;
}
}

/*# sourceMappingURL=employees.v2.css.map */