@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.v1 {
	border-radius: 6px;
	border: 1px solid #b6b6b6;
	background: #f8f8f8;
	padding: 40px;
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: 690px;
}

	@media (max-width: 480px) {
.employeeCard.v1 {
		flex-direction: column;
		text-align: center;
		padding: 30px 20px;
		gap: 10px
}
	}

	.employeeCard.v1 .image {
		flex: 0 0 auto;
	}

		.employeeCard.v1 .image img {
			width: var(--img-width, 120px);
			aspect-ratio: 1;
			-o-object-fit: var(--img-object-fit, cover);
			   object-fit: var(--img-object-fit, cover);
			border-radius: 50%;
			overflow: hidden;
		}

	.employeeCard.v1 .content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 20px;
	}

		@media (max-width: 480px) {

	.employeeCard.v1 .content {
			font-size: 18px
	}
		}

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

		@media (max-width: 480px) {

	.employeeCard.v1 .name {
			font-size: var(--name-font-size-mobile, 22px)
	}
		}

	.employeeCard.v1 a {
		font-weight: 300;
		text-decoration: none;
	}

		.employeeCard.v1 a:hover {
			text-decoration: underline;
		}
}
@layer components {
.employeesContainer.v1 {
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 690px;
	margin-bottom: var(--default-margin);
}
}

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