.humanresources-chart {
	height: 100%;
	position: relative;
}

.humanresources-chart__back {
	background: #f7faff;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 92%;
	z-index: -1;
}

.humanresources-transform-panel {
	position: absolute;
	left: 8px;
	background: var(--ui-color-palette-white-base);
	box-shadow: 0px 2px 20.4px 0px #01388114;
	border-radius: 222px;
}

.humanresources-chart .humanresources-canvas__transform {
	transition: transform 0.1s ease-out;
}

.humanresources-chart .humanresources-canvas.--moving .humanresources-canvas__transform  {
	transition-duration: 0.55s;
}

.humanresources-transform-panel,
.humanresources-transform-panel__zoom {
	display: flex;
	align-items: center;
}

.humanresources-transform-panel {
	bottom: 8px;
	padding: 4px 8px;
	outline: none;
	gap: 6px;
}

.humanresources-transform-panel__zoom {
	font: var(--ui-font-weight-medium) 12px/14px var(--ui-font-family-system);
	color: var(--ui-color-palette-gray-70);
	gap: 2px;
	padding-left: 4px;
}

.humanresources-transform-panel__zoom_percent {
	font: var(--ui-font-weight-medium) 10px/12px var(--ui-font-family-system);
	color: var(--ui-color-palette-gray-50);
	margin-left: 3px;
}

.humanresources-transform-panel__icon {
	min-width: 16px;
	width: 16px;
	min-height: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.humanresources-transform-panel__icon:hover path {
	fill: var(--ui-color-palette-gray-90);
}

.humanresources-transform-panel__icon.--selected path {
	fill: var(--ui-color-palette-blue-60);
}

.humanresources-transform-panel__separator {
	width: 1px;
	height: 28px;
	background: var(--ui-color-palette-gray-10);
}

.humanresources-transform-panel__locate {
	cursor: pointer;
	margin: 0 8px 0 7px;
	padding-bottom: 1px;
	border-bottom: 1px dashed var(--ui-color-palette-gray-30);
	font: var(--ui-font-weight-medium) 12px/14px var(--ui-font-family-system);
	color: var(--ui-color-palette-gray-80);
}

.humanresources-transform-panel__locate:hover {
	color: var(--ui-color-palette-gray-90);
}

.humanresources-transform-panel__locate.--selected {
	color: var(--ui-color-palette-blue-60);
}

.humanresources-detail-panel {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: var(--ui-color-palette-white-base);
	box-shadow: 0 6px 12px 0 #0000001F;
	border-radius: 8px;
	font: var(--ui-font-family-system);
	display: flex;
	flex-direction: column;
	max-width: 356px;
	min-width: 356px;
	height: calc(100% - 16px);
}

.humanresources-detail-panel.--collapsed {
	height: 39px;
	min-width: 0;
	display: flex;
	align-items: center;
	cursor: pointer;
	border-radius: 222px;
	transition: color .1s;
}

.humanresources-detail-panel.--collapsed:hover .humanresources-detail-panel__title {
	color: var(--ui-color-palette-blue-60);
}

.humanresources-detail-panel.--collapsed:hover .humanresources-detail-panel__collapse_button.--icon.--collapsed {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzgwNzRfMjkzNzI4KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04Ljg1NCAxMy44NTFsMy41OTktMy40MTkuODk3LS44ODUuODk5Ljg4NSAzLjU5OCAzLjQyIDEuMjctMS4yMDctNS43NjYtNS40NzgtNS43NjcgNS40NzggMS4yNyAxLjIwNnptMCA0LjU1bDMuNTk5LTMuNDIuODk3LS44ODUuODk5Ljg4NiAzLjU5OCAzLjQxOCAxLjI3LTEuMjA2LTUuNzY2LTUuNDc4LTUuNzY3IDUuNDc4IDEuMjcgMS4yMDZ6IiBmaWxsPSIjMTFBOUQ5Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfODA3NF8yOTM3MjgiPjxyZWN0IHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiIgcng9IjQiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=);
}

.humanresources-detail-panel-container {
	height: 100%;
}

.humanresources-detail-panel-container.--hide {
	display: none;
}

.--collapsed .humanresources-detail-panel__head {
	padding: 0 10px;
	height: 100%;
}

.humanresources-detail-panel__head {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	padding: 16px 18px 0;
	align-items: center;
	box-sizing: border-box;
	height: 38px;
}

.humanresources-detail-panel__content {
	overflow: hidden;
	height: calc(100% - 38px);
}

.humanresources-detail-panel__collapsed-title {
	display: flex;
	gap: 6px;
	padding-right: 6px;
	align-items: center;
}

.humanresources-detail-panel__collapsed-title-avatar {
	height: 20px;
	width: 20px;
	border-radius: 50%;
	border: 2px solid var(--ui-color-palette-white-base);
}

.humanresources-detail-panel__collapsed-title-avatar.--additional {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	font-size: var(--ui-font-size-4xs);
	line-height: var(--ui-font-line-height-3xs);
	font-weight: var(--ui-font-weight-normal);
	color: var(--ui-color-palette-gray-90);
	background-color: var(--ui-color-palette-gray-10);

	min-width: 20px;
	width: auto;
}

.humanresources-detail-panel__header_buttons_container {
	display: flex;
	align-items: center;
	gap: 12px;
}

.humanresources-detail-panel__collapsed-title-avatar:not(:first-child) {
	margin-left: -16px;
}

.humanresources-detail-panel__collapse_button {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYuMTUzIDMuNmEuNTcyLjU3MiAwIDAwLS44MDkgMGwtLjY0LjYzOWEuNTcyLjU3MiAwIDAwMCAuODA5bDUuNTI4IDUuNTI4SDYuMDFhLjU3Mi41NzIgMCAwMC0uNTczLjU3MnYuNzM1YzAgLjMxNi4yNTcuNTcyLjU3My41NzJIMTMuMDMzYS41NzIuNTcyIDAgMDAuNTcyLS41NzJWNC44NmEuNTcyLjU3MiAwIDAwLS41NzItLjU3MmgtLjk0M2EuNTcyLjU3MiAwIDAwLS41NzIuNTcydjQuMTA1TDYuMTUzIDMuNTk5ek00Ljk5IDE0Ljc2M2EuNTcyLjU3MiAwIDAwLS41NzIuNTcydi43MzVjMCAuMzE2LjI1Ni41NzIuNTcyLjU3MmgxMC4yNzJhLjU3Mi41NzIgMCAwMC41NzItLjU3MnYtLjczNWEuNTcyLjU3MiAwIDAwLS41NzItLjU3Mkg0Ljk5eiIgZmlsbD0iIzgyOEI5NSIvPjwvc3ZnPg==);
}

.--hr-department-detail-action-menu-edit-list {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNS43NSA0LjgwN3YuODI3bC0uNzQ1Ljc0NUg0Ljg4YS42NjcuNjY3IDAgMDEtLjY2Ny0uNjY2di0uOTA2YzAtLjM2OC4yOTgtLjY2Ni42NjctLjY2NmgxMC4yMDNjLjM2OCAwIC42NjcuMjk4LjY2Ny42NjZ6TTQuODggOC44NTRoNy42NWwtMi4yMzkgMi4yMzlINC44OGEuNjY3LjY2NyAwIDAxLS42NjctLjY2N3YtLjkwNWMwLS4zNjguMjk4LS42NjcuNjY3LS42Njd6bTAgNC43MTVoMy43OThhNC41ODcgNC41ODcgMCAwMC0uMDMxIDIuMjRINC44OGEuNjY3LjY2NyAwIDAxLS42NjctLjY2OHYtLjkwNWMwLS4zNjguMjk4LS42NjcuNjY3LS42Njd6bTExLjU5Ny01Ljc0M2EuNTkyLjU5MiAwIDAxLjgzOCAwbC43OS43OWEuNTkyLjU5MiAwIDAxMCAuODM4bC01LjE5NyA1LjE5Ny0xLjYyOC0xLjYyOCA1LjE5Ny01LjE5N3ptLTMuODkgNy4xNDdsLTIuMDY1LjQzNS40MzUtMi4wNjIgMS42MyAxLjYyN3oiIGZpbGw9IiM2QTczN0YiLz48cGF0aCBkPSJNMTUuNzQ5IDQuODA3di44MjhsLS43NDUuNzQ0SDQuODc5YS42NjcuNjY3IDAgMDEtLjY2Ny0uNjY2di0uOTA2YzAtLjM2OC4yOTgtLjY2Ni42NjctLjY2NmgxMC4yMDNjLjM2OCAwIC42NjcuMjk4LjY2Ny42NjZ6TTQuODc5IDguODU0aDcuNjVsLTIuMjM5IDIuMjM5SDQuODhhLjY2Ny42NjcgMCAwMS0uNjY3LS42Njd2LS45MDVjMC0uMzY4LjI5OC0uNjY3LjY2Ny0uNjY3ek00Ljg3OSAxMy41N2gzLjc5OGE0LjU4NyA0LjU4NyAwIDAwLS4wMzEgMi4yMzhINC44NzlhLjY2Ny42NjcgMCAwMS0uNjY3LS42Njd2LS45MDVjMC0uMzY4LjI5OC0uNjY3LjY2Ny0uNjY3ek0xNi40NzcgNy44MjZhLjU5Mi41OTIgMCAwMS44MzggMGwuNzkuNzlhLjU5Mi41OTIgMCAwMTAgLjgzOGwtNS4xOTcgNS4xOTctMS42MjgtMS42MjcgNS4xOTctNS4xOTh6TTEyLjU4NyAxNC45NzNsLTIuMDY0LjQzNS40MzQtMi4wNjIgMS42MyAxLjYyN3oiIGZpbGw9IiMwMEEyRTgiLz48L3N2Zz4=);
}

.humanresources-detail-panel__edit-button-icon {
	--ui-icon-set__icon-color: var(--ui-color-palette-gray-50);
}

.humanresources-detail-panel__edit-button:hover,
.humanresources-detail-panel__edit-button:active {
	background-color: var(--ui-color-palette-blue-20);
}

.humanresources-detail-panel__edit-button.--focused{
	background-color: var(--ui-color-palette-blue-25);
}

.humanresources-detail-panel__edit-button.--focused .humanresources-detail-panel__edit-button-icon,
.humanresources-detail-panel__edit-button:hover .humanresources-detail-panel__edit-button-icon{
	--ui-icon-set__icon-color: var(--ui-color-palette-blue-60);
}

.humanresources-detail-panel__edit-button {
	height: 28px;
	width: 36px;
	border-radius: 80px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.5s;
}

.humanresources-detail-panel__collapse_button.--icon.--collapsed {
	position: relative;
	margin-left: 7px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzgwNzRfMzgxODMzKSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04Ljg1NCAxMy44NTFsMy41OTktMy40MTkuODk3LS44ODUuODk5Ljg4NSAzLjU5OCAzLjQyIDEuMjctMS4yMDctNS43NjYtNS40NzgtNS43NjcgNS40NzggMS4yNyAxLjIwNnptMCA0LjU1bDMuNTk5LTMuNDIuODk3LS44ODUuODk5Ljg4NiAzLjU5OCAzLjQxOCAxLjI3LTEuMjA2LTUuNzY2LTUuNDc4LTUuNzY3IDUuNDc4IDEuMjcgMS4yMDZ6IiBmaWxsPSIjNkE3MzdGIi8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfODA3NF8zODE4MzMiPjxyZWN0IHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiIgcng9IjQiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=);
}

.humanresources-detail-panel__collapse_button.--icon.--collapsed::after {
	content: '';
	position: absolute;
	left: -5px;
	width: 1px;
	height: 28px;
	top: -3px;
	background-color: var(--ui-color-palette-gray-10);
}

.humanresources-detail-panel__head .--icon {
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.humanresources-detail-panel__title {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	align-items: center;
	max-width: 280px;

	font-weight: var(--ui-font-weight-semi-bold);
	font-size: var(--ui-font-size-2xl);
	line-height: var(--ui-font-line-height-3xs);
	color: var(--ui-color-palette-black-base);
}

.--collapsed .humanresources-detail-panel__title {
	margin-top: 2px;
	max-width: 245px;
	font-weight: var(--ui-font-weight-medium);
	font-size: var(--ui-font-size-xs);
	line-height: var(--ui-font-line-height-3xs);
	color: var(--ui-color-palette-gray-90);
}

.humanresources-detail-panel-loader-container {
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='356' viewBox='0 0 382 1135' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Csvg height='100%25' id='g'%3E%3Cg id='a' fill='%23EDEEF0'%3E%3Crect x='20' y='210' width='32' height='32' rx='16'/%3E%3Crect x='62' y='215' width='104' height='6' rx='2'/%3E%3Crect x='62' y='232' width='200' height='6' rx='2'/%3E%3C/g%3E%3Cg id='b' fill='%23EDEEF0'%3E%3Crect x='20' y='26' width='97' height='12' rx='2'/%3E%3Ccircle cx='308' cy='31' r='7'/%3E%3Ccircle cx='350' cy='31' r='7'/%3E%3Crect x='20' y='58' width='301' height='8' rx='2'/%3E%3Crect x='20' y='86' width='106' height='20' rx='10'/%3E%3Crect x='134' y='86' width='111' height='20' rx='10'/%3E%3Crect x='20' y='140' width='66' height='8' rx='4'/%3E%3Crect x='20' y='180' width='91' height='9' rx='2'/%3E%3C/g%3E%3Cg id='c'%3E%3Cuse xlink:href='%23a'/%3E%3Cuse xlink:href='%23a' y='59'/%3E%3C/g%3E%3Cg id='d'%3E%3Crect x='20' y='328' width='71' height='9' rx='2' fill='%23EDEEF0'/%3E%3Cuse xlink:href='%23a' y='152'/%3E%3Cuse xlink:href='%23a' y='211'/%3E%3Cuse xlink:href='%23a' y='270'/%3E%3Cuse xlink:href='%23a' y='329'/%3E%3Cuse xlink:href='%23a' y='388'/%3E%3Cuse xlink:href='%23a' y='447'/%3E%3Cuse xlink:href='%23a' y='506'/%3E%3Cuse xlink:href='%23a' y='565'/%3E%3Cuse xlink:href='%23a' y='624'/%3E%3Cuse xlink:href='%23a' y='683'/%3E%3Cuse xlink:href='%23a' y='742'/%3E%3Cuse xlink:href='%23a' y='801'/%3E%3Cuse xlink:href='%23a' y='860'/%3E%3C/g%3E%3C/svg%3E%3Cuse xlink:href='%23b'/%3E%3Cuse xlink:href='%23c'/%3E%3Cuse xlink:href='%23d'/%3E%3Crect id='h' width='100%25' fill='url(%23e)' mask='url(%23f)' height='1270'/%3E%3Cmask id='f' fill='%23fff'%3E%3Cuse xlink:href='%23g'/%3E%3C/mask%3E%3ClinearGradient x1='66.6%25' y1='50%25' x2='33.3%25' y2='50%25' id='e'%3E%3Cstop stop-opacity='0' offset='0%25'/%3E%3Cstop stop-opacity='.07' offset='50%25'/%3E%3Cstop stop-opacity='0' offset='100%25'/%3E%3C/linearGradient%3E%3Canimate xlink:href='%23h' attributeName='x' from='-100%25' to='100%25' dur='1s' begin='0s' repeatCount='indefinite'/%3E%3C/svg%3E") no-repeat;
}

.-hr-department-org-chart-menu-edit-list {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.749 4.807v.828l-.745.744H4.879a.667.667 0 01-.667-.666v-.906c0-.368.298-.666.667-.666h10.203c.368 0 .667.298.667.666zM4.879 8.854h7.65l-2.239 2.239H4.88a.667.667 0 01-.667-.667v-.905c0-.368.298-.667.667-.667zM4.879 13.57h3.798a4.587 4.587 0 00-.031 2.238H4.879a.667.667 0 01-.667-.667v-.905c0-.368.298-.667.667-.667zM16.477 7.826a.592.592 0 01.838 0l.79.79a.592.592 0 010 .838l-5.197 5.197-1.628-1.627 5.197-5.198zM12.587 14.973l-2.064.435.434-2.062 1.63 1.627z' fill='%232FC6F6'/%3E%3C/svg%3E");
}
.humanresources-title-panel {
	position: absolute;
	left: 8px;
	background: var(--ui-color-palette-white-base);
	box-shadow: 0px 2px 20.4px 0px #01388114;
	border-radius: 222px;
	display: flex;
	top: 8px;
	z-index: 2;
	padding: 10px 24px;
	align-items: center;
	gap: 12px;
}

.humanresources-title-panel__title {
	font: var(--ui-font-weight-medium) 20px/24px var(--ui-font-family-system);
	color: var(--ui-color-palette-black-solid);
	margin: 0;
}

.humanresources-title-panel__separator {
	width: 1px;
	height: 28px;
	background: var(--ui-color-palette-gray-05);
}

.humanresources-title-panel__icon {
	min-width: 24px;
	width: 24px;
	min-height: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.humanresources-title-panel__icon:hover path,
.humanresources-title-panel__icon.--selected path {
	fill: var(--ui-color-palette-blue-60);
}
.humanresources-title-panel__star {
	cursor: pointer;
	margin-top: 3px;
}

.humanresources-tree {
	position: relative;
	height: 100%;
}

.humanresources-tree.--moving-to {
	transition-duration: 0.4s;
}

.humanresources-tree__connectors {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
	z-index: -1;
}

.humanresources-tree__connectors path {
	stroke: #d2d6e0;
	stroke-width: 2px;
}

.humanresources-tree__connectors path.--highlighted {
	stroke: var(--ui-color-palette-blue-50);
}

.humanresources-tree .v-enter-active,
.humanresources-tree .v-leave-active {
  transition: opacity .4s ease-out;
}

.humanresources-tree .v-enter-from,
.humanresources-tree .v-leave-to {
  opacity: 0;
}

.humanresources-tree__node {
	position: relative;
	width: 278px;
	margin: 0 auto;
}

.humanresources-tree__node.--current-department:before {
	position: absolute;
	top: -5px;
	right: 10px;
	background: var(--ui-color-palette-blue-50);
	font: var(--ui-font-weight-semi-bold) 10px/12px var(--ui-font-family-system);
	content: attr(data-title);
	color: var(--ui-color-palette-white-base);
	padding: 3px 10px 3px 8px;
	border-radius: 17px;
	text-transform: uppercase;
}

.humanresources-tree__node_summary {
	background: var(--ui-color-palette-white-base);
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 12%);
	border-radius: 12px;
	padding-top: 13px;
	border: 2px solid transparent;
	cursor: pointer;
}

.humanresources-tree__node_summary:hover {
	box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.16);
}

.humanresources-tree__node.--expanded > .humanresources-tree__node_summary {
	border-color: var(--ui-color-palette-blue-50);
}

.humanresources-tree__node.--focused > .humanresources-tree__node_summary {
	border-color: var(--ui-color-palette-blue-50);
	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.12), 0px 0px 0px 9px rgba(203, 213, 255);
}

.humanresources-tree__node.--expanded:not(.--focused) > .humanresources-tree__node_summary {
	box-shadow: none;
}

.humanresources-tree__node > .humanresources-tree__node_summary .humanresources-tree__node_subdivisions:hover {
	background: var(--ui-color-palette-blue-10);
}

.humanresources-tree__node.--root > .humanresources-tree__node_summary .humanresources-tree__node_subdivisions:hover {
	background: var(--ui-color-palette-green-10);
}

.humanresources-tree__node.--expanded > .humanresources-tree__node_summary .humanresources-tree__node_subdivisions {
	background: var(--ui-color-palette-blue-15);
	color: var(--ui-color-palette-blue-70);
	font-weight: var(--ui-font-weight-medium);
}

.humanresources-tree__node.--expanded.--root > .humanresources-tree__node_summary .humanresources-tree__node_subdivisions {
	background: var(--ui-color-palette-green-15);
	color: var(--ui-color-palette-green-70);
}

.humanresources-tree__node_description {
	padding: 0 16px;
}

.humanresources-tree__node_department {
	display: flex;
	justify-content: space-between;
	font: var(--ui-font-weight-semi-bold) 14px/16.71px var(--ui-font-family-system);
	color: var(--ui-color-palette-black-base);
	margin: 0 0 15px 0;
}

.humanresources-tree__node_department-title {
	white-space: nowrap;
	overflow: hidden;
}

.humanresources-tree__node_department-title_text {
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.humanresources-tree__node.--root > .humanresources-tree__node_summary .humanresources-tree__node_department-title {
	display: flex;
	align-items: center;
}

.humanresources-tree__node.--root > .humanresources-tree__node_summary .humanresources-tree__node_department-title::before{
	content: '';
	display: inline-block;
	vertical-align: middle;
	margin-right: 2px;
	min-width: 20px;
	height: 20px;
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy4xIDguOTI3YS41My41MyAwIDAxLjY2LS41MjdsMi40ODEuNjMzYS41NC41NCAwIDAxLjQwMy41Mjd2NS4wMDRoLjQ4NmEuNC40IDAgMDEuNC40djEuMDFhLjQuNCAwIDAxLS40LjRIMy43NTVhLjQuNCAwIDAxLS40LS40di0xLjAxYzAtLjIyLjE4LS40LjQtLjRoLjQ4NlY1LjgwMWEuOS45IDAgMDEuNzQ0LS44OTNsNi4yMDItMS4wM2EuODk2Ljg5NiAwIDAxMS4wMjguODkzdjkuNzkzaC44ODVWOC45Mjd6bS01LjA0IDUuNTQ4di0yLjc4SDYuNDcydjIuNzhIOC4wNnptMi40MjItMS4xOTF2LTEuNTg5SDguODk0djEuNTg5aDEuNTg4em01LjEyMy0xLjY2N2gtMS41ODl2MS41ODhoMS41ODl2LTEuNTg4em0tNS4xMjMtNC43NjVIOC44OTRWOC40NGgxLjU4OFY2Ljg1MnptLTIuNDIyIDBINi40NzJWOC40NEg4LjA2VjYuODUyem0yLjQyMiAyLjQyMkg4Ljg5NHYxLjU4OGgxLjU4OFY5LjI3NHptLTIuNDIyIDBINi40NzJ2MS41ODhIOC4wNlY5LjI3NHoiIGZpbGw9IiM5NUM1MDAiLz48L3N2Zz4=) no-repeat center;
}

.humanresources-tree__node_employees {
	display: flex;
	margin-bottom: 15px;
	white-space: nowrap;
	width: 100%;
}

.humanresources-tree__node_employees > div {
	box-sizing: border-box;
}

.humanresources-tree__node_employees > div:first-child {
	width: 40%;
}

.humanresources-tree__node_employees > div:last-child {
	width: 60%;
	padding-left: 8px;
	margin-left: 0;
}

.humanresources-tree__node_head-position,
.humanresources-tree__node_employees-title {
	font: 11px/13.13px var(--ui-font-family-system);
	color: var(--ui-color-palette-gray-60);
}

.humanresources-tree__node_employees-title {
	margin: 0 0 5px 0;
}

.humanresources-tree__node_employees-count {
	border: 1px solid #e9e9e9;
	border-radius: 30px;
	font: 11px/16px var(--ui-font-family-system);
	color: var(--ui-color-palette-gray-90);
	padding: 2px 7px;
	display: inline-block;
	width: -webkit-max-content;
	width: max-content;
}

.humanresources-tree__node_employees-count:hover {
	background: var(--ui-color-palette-gray-03);
}

.humanresources-tree__node_employees-count:active {
	background: #e9e9e9;
}

.humanresources-tree__node_avatar.--deputy {
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

.humanresources-tree__node_deputy-name {
	font: 12px/14.32px var(--ui-font-family-system);
	color: var(--ui-color-palette-black-base);
}

.humanresources-tree__node_subdivisions {
	border-top: 1px solid var(--ui-color-palette-gray-10);
	text-align: center;
	padding: 10px 16px 10px 16px;
	font: 11px/16px var(--ui-font-family-system);
	color: var(--ui-color-palette-gray-90);
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

.humanresources-tree__node > .humanresources-tree__node_summary .humanresources-tree__node_subdivisions.--transparent {
	opacity: .5;
	background: none;
}

.humanresources-tree__node_arrow:after {
	content: '';
	display: inline-block;
	border: 2px solid var(--ui-color-palette-gray-60);
	border-left: none;
	border-top: none;
	width: 5px;
	height: 5px;
	margin-left: 7px;
}

.humanresources-tree__node_arrow.--up:after {
	transform: rotate(-135deg);
}

.humanresources-tree__node_arrow.--down:after {
	transform: rotate(45deg);
}

.humanresources-tree__node_arrow.--right:after {
	transform: rotate(-45deg);
}

.humanresources-tree__node.--expanded > .humanresources-tree__node_summary .humanresources-tree__node_arrow.--up:after {
	border-color: var(--ui-color-palette-blue-70);
}

.humanresources-tree__node.--expanded.--root > .humanresources-tree__node_summary .humanresources-tree__node_arrow.--up:after {
	border-color: var(--ui-color-palette-green-70);
}

.humanresources-tree__node_children {
	position: absolute;
	display: flex;
	gap: 20px;
	margin-top: 100px;
}

.humanresources-tree__node_add-subdivision {
	position: relative;
	display: flex;
	justify-content: center;
}

.humanresources-tree__add-button {
	position: absolute;
	bottom: -45px;
	background-color: var(--ui-color-palette-white-base);
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 12%);
}

.humanresources-tree__add-button:hover {
	background-color: var(--ui-color-palette-blue-50);
	color: var(--ui-color-palette-white-base);
}

.humanresources-tree-add-icon {
	background: var(--ui-color-palette-blue-50);
}

.humanresources-tree-add-icon:hover {
	background: var(--ui-color-palette-white-base);
}

.humanresources-tree__message-box .popup-window-titlebar {
	font: var(--ui-font-weight-bold) 15px/18px var(--ui-font-family-system);
	padding: 0 14px;
	color: #535c69;
}

.humanresources-tree__message-box .popup-window-titlebar-text {
	padding: 0;
}

.humanresources-tree__message-box .popup-window-content {
	font: 14px/17px var(--ui-font-family-system);
	padding: 4px 14px 10px 14px;
	color: var(--ui-color-palette-gray-90);
}

.humanresources-tree__message-box .popup-window-buttons {
	padding-top: 15px;
	border-top: 1px solid #f1f2f3;
}

.first-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.first-popup-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.first-popup-content {
	display: flex;
	flex-direction: column;
	position: relative;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='784' height='543' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath transform='matrix(0 1 1 0 0 0)' fill='url(%23paint0_linear_1_47)' d='M0 0h543v784H0z'/%3E%3Cg clip-path='url(%23clip0_1_47)' opacity='.4'%3E%3Ccircle opacity='.1' cx='733' cy='619.867' r='327' fill='url(%23paint1_linear_1_47)'/%3E%3Cg opacity='.08' filter='url(%23filter0_f_1_47)'%3E%3Cellipse cx='741.444' cy='696.145' rx='359.5' ry='338.5' transform='rotate(2.238 741.444 696.145)' fill='%23313131'/%3E%3C/g%3E%3Cg opacity='.1' filter='url(%23filter1_f_1_47)'%3E%3Cellipse cx='640.733' cy='323.01' rx='61.6' ry='15.5' transform='rotate(-15.098 640.733 323.01)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3Cg clip-path='url(%23clip1_1_47)' opacity='.6'%3E%3Ccircle opacity='.06' cx='51' cy='-48.867' r='327' transform='rotate(-180 51 -48.867)' fill='url(%23paint2_linear_1_47)'/%3E%3Cg opacity='.06' filter='url(%23filter2_f_1_47)'%3E%3Cellipse cx='42.556' cy='-125.145' rx='359.5' ry='338.5' transform='rotate(-177.762 42.556 -125.145)' fill='%23313131'/%3E%3C/g%3E%3Cg opacity='.1' filter='url(%23filter3_f_1_47)'%3E%3Cellipse cx='143.267' cy='247.99' rx='61.6' ry='15.5' transform='rotate(164.902 143.267 247.99)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3Cg opacity='.1' filter='url(%23filter4_f_1_47)' clip-path='url(%23clip2_1_47)'%3E%3Cellipse cx='143.267' cy='166.702' rx='61.6' ry='15.5' transform='rotate(164.902 143.267 166.702)' fill='%23CAD0FF'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_1_47' x='333.069' y='308.706' width='816.749' height='774.877' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='24.45' result='effect1_foregroundBlur_1_47'/%3E%3C/filter%3E%3Cfilter id='filter1_f_1_47' x='532.621' y='252.569' width='216.227' height='140.882' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='24.25' result='effect1_foregroundBlur_1_47'/%3E%3C/filter%3E%3Cfilter id='filter2_f_1_47' x='-365.818' y='-512.584' width='816.749' height='774.877' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='24.45' result='effect1_foregroundBlur_1_47'/%3E%3C/filter%3E%3Cfilter id='filter3_f_1_47' x='35.152' y='177.549' width='216.227' height='140.882' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='24.25' result='effect1_foregroundBlur_1_47'/%3E%3C/filter%3E%3Cfilter id='filter4_f_1_47' x='35.152' y='96.261' width='216.227' height='140.882' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='24.25' result='effect1_foregroundBlur_1_47'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_1_47' x1='543' y1='392' x2='47.5' y2='270.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230B1E3A'/%3E%3Cstop offset='1' stop-color='%23152845'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_1_47' x1='733' y1='493.014' x2='624.47' y2='314.009' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_1_47' x1='51' y1='-175.721' x2='-57.53' y2='-354.725' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_1_47'%3E%3Cpath d='M369 292h415v227c0 13.255-10.745 24-24 24H369V292z' fill='%23fff'/%3E%3C/clipPath%3E%3CclipPath id='clip1_1_47'%3E%3Cpath d='M415 279H0V24C0 10.745 10.745 0 24 0h391v279z' fill='%23fff'/%3E%3C/clipPath%3E%3CclipPath id='clip2_1_47'%3E%3Cpath d='M415 197.712H0V24C0 10.745 10.745 0 24 0h391v197.712z' fill='%23fff'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat;
	color: #fff;
	border-radius: 24px;
	padding: 20px;
	width: 784px;
	height: 543px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	font: var(--ui-font-weight-medium) 18px/22px var(--ui-font-family-system);
	overflow: visible;
	background-size: cover
}

.first-popup-left {
	flex: 1;
	padding: 0 20px 20px 20px;
	max-width: 422px;
	flex-direction: column;
}

.first-popup-content .title {
	font: var(--ui-font-weight-bold) 32px/38px var(--ui-font-family-system);
   	padding: 20px 20px 0 20px;
}

.first-popup-left .description {
	-webkit-margin-before: 8px;
	        margin-block-start: 8px;
	margin-bottom: 30px;
	color: rgba(255, 255, 255, 0.7);
	font: var(--ui-font-weight-normal) 22px/26px var(--ui-font-family-system);
}
.first-popup-left .sub-description {
	margin-bottom: 20px;
	color: rgba(255, 255, 255, 0.8);
	font: var(--ui-font-weight-normal) 18px/22px var(--ui-font-family-system);
}

.first-popup-list {
	display: flex;
	flex-direction: column;
	margin-bottom: 40px;
	gap: 10px;
}
.first-popup-list-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font: var(--ui-font-weight-normal) 16px/19px var(--ui-font-family-system);
	line-height: 1.5;
}

.first-popup-list-item-point {
	font: var(--ui-font-weight-bold) 24px/36px var(--ui-font-family-system);
	color: var(--ui-color-palette-green-40);
	line-height: 0;
	margin-top: 10px;
}

.first-popup-list-item-feature {
	flex: 1;
}

.first-popup-right {
	position: absolute;
	top: 50%;
	right: -20%;
	transform: translateY(-50%);
	width: 60%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
}

.first-popup-right video {
	border-radius: 12px;
	max-width: 100%;
	max-height: 100%;
	outline: none;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.first-popup-close {
	cursor: pointer;
	position: absolute;
	right: 20px;
	top: 20px;
}
.first-popup-close:hover {
	color: rgba(0, 0, 0, 0.2);
}

.first-popup-ui-btn {
	border-radius: 64px;
	width: 139px;
	height: 47px;
}
.humanresources-title-panel-search-bar-fade-enter-active,
.humanresources-title-panel-search-bar-fade-leave-active {
	transition: opacity 0.1s;
}

.humanresources-title-panel-search-bar-fade-enter-from,
.humanresources-title-panel-search-bar-fade-leave-to {
	opacity: 0;
}

.humanresources-title-panel-search-bar-block__search,
.humanresources-title-panel-search-bar-block__filter,
.humanresources-title-panel-search-bar-block__search-reset {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.humanresources-title-panel-search-bar-block__search-reset {
	margin-left: auto;
}

.humanresources-title-panel-search-bar-block__search-input {
	flex-grow: 1;
	height: 30px;
	background-color: inherit;
	border: none;
	font: var(--ui-font-size-md) var(--ui-font-family-system);
	color: var(--ui-color-base-90);
	outline: none;
	padding-left: 10px;
	padding-right: 12px;
	box-sizing: border-box;
	min-width: 219px;
}

.humanresources-title-panel-search-bar-container.--opened {
	border-radius: 98px;
	border: 1px solid #00ace3;
	display: flex;
	min-width: 329px;
	max-width: 329px;
	align-items: center;
	padding: 0 10px;
}

.humanresources-title-panel-search-bar-block__search-bar {
	display: flex;
	flex-grow: 1;
	width: 100%;
}

.humanresources-title-panel-search-bar-container {
	display: flex;
	align-items: center;
}

.humanresources-title-panel-search-bar-block__search-input::placeholder {
	font: var(--ui-font-size-md) var(--ui-font-family-system);
	color: var(--ui-color-base-60);
}

.hr-title-search-icon {
	background: #959ca4;
}

.hr-title-search-icon:hover {
	background: #00ace3;
}

.ui-selector-item-box-open > .ui-selector-item > .ui-selector-item-indicator {
	 transform: rotate(360deg);
}
.humanresources-tree__node_department-menu-button {
	background-size: contain;
	--ui-icon-set__icon-size: 22px;
	--ui-icon-set__icon-color: var(--ui-color-palette-gray-50);
}

.humanresources-tree__node_department-menu-button:hover {
	--ui-icon-set__icon-color: var(--ui-color-palette-gray-80);
}

.humanresources-tree__node_department-menu-button.--focused {
	background-size: contain;
	--ui-icon-set__icon-color: var(--ui-color-palette-blue-60);
}

.--tree-node-edit-department-menu-icon::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.264 8.017l1.553-1.554v5.308c0 .858-.696 1.554-1.553 1.554H1.72A1.554 1.554 0 01.166 11.77V3.227c0-.857.696-1.553 1.554-1.553h5L5.167 3.227H1.72v8.544h8.544V8.017zM11.377.185l1.937 1.957L7.7 7.735 5.764 5.78 11.377.185zM4.864 8.39l.584-2.165 1.826 1.826-2.165.583c-.07.02-.143 0-.194-.051a.203.203 0 01-.05-.193z' fill='%236A737F'/%3E%3C/svg%3E")
}

.--tree-node-add-employee-menu-icon::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.776 11.622c0 .893.28 1.721.757 2.4a17.12 17.12 0 01-1.165.065h-.749c-1.858-.04-3.61-.376-5.162-.943a.788.788 0 01-.503-.87c.058-.356.122-.699.187-.953.223-.87 1.48-1.517 2.635-2.014.302-.13.485-.234.67-.34.18-.102.362-.205.66-.336.033-.16.047-.324.04-.487l.512-.061s.067.122-.04-.597c0 0-.576-.149-.603-1.294 0 0-.432.144-.458-.55a1.812 1.812 0 00-.076-.398c-.082-.306-.155-.58.219-.818l-.27-.72s-.284-2.78.96-2.555c-.504-.8 3.755-1.465 4.038.985.111.738.111 1.489 0 2.228 0 0 .636-.074.212 1.136 0 0-.234.871-.593.675 0 0 .058 1.1-.508 1.287 0 0 .04.586.04.626l.473.07s-.008.271.027.431a4.17 4.17 0 00-1.303 3.033zm3.506-2.818h1.414v2.146h2.12v1.415h-2.12v2.147h-1.414v-2.147H9.108V10.95h2.174V8.804z' fill='%236A737F'/%3E%3C/svg%3E")
}

.--tree-node-add-department-menu-icon::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.917.576c.01-.005.019-.01.028-.012.035-.01.065-.002.103.017l5.569 2.204c.143.066.196.193.193.408v2.223a4.765 4.765 0 00-5.202 7.405l-.523.207a.361.361 0 01-.23-.005l-5.488-2.17c-.109-.043-.192-.193-.193-.35V3.146c.004-.166.054-.308.193-.373L5.907.581l.01-.005zm.06 1.22l4.308 1.71-4.307 1.7L1.666 3.5l4.312-1.705zm3.748 5.327h1.414V9.27h2.147v1.415h-2.147v2.147H9.725v-2.147H7.578V9.27h2.147V7.123z' fill='%236A737F'/%3E%3C/svg%3E");
}

.--tree-node-remove-department-menu-icon::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.692 7.5a6.693 6.693 0 11-13.385 0 6.693 6.693 0 0113.385 0zm-1.46 0a5.232 5.232 0 11-10.465 0 5.232 5.232 0 0110.465 0zm-6.066-.833h4.167v1.667H3.666V6.667h2.5zm0 4.166h1.667-1.667z' fill='%23FF5752'/%3E%3C/svg%3E");
}

.humanresources-tree__node_head-rest {
	margin-left: auto;
	background: #eeeff0;
	border-radius: 32px;
	padding: 2px 8px 3px 8px;
	color: var(--ui-color-palette-gray-90);
	font: var(--ui-font-weight-semi-bold) 10px/10px var(--ui-font-family-system);
}

.humanresources-tree__node_head {
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.humanresources-tree__node_head.--collapsed {
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.humanresources-tree__node_head-text {
	overflow: hidden;
	white-space: nowrap;
}

.humanresources-tree__node_head-name,
.humanresources-tree__node_head-position {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.humanresources-tree__node_head-name {
	border-bottom: 1px solid transparent;
	font: 13px/15.51px var(--ui-font-family-system);
	color: var(--ui-color-palette-black-base);
	margin-bottom: 2px;
	width: -webkit-max-content;
	width: max-content;
	max-width: 100%;
}

.humanresources-tree__node_head-name:hover {
	border-bottom-color: var(--ui-color-palette-black-base);
}

.humanresources-tree__node_avatar {
	border-radius: 50%;
}

.humanresources-tree__node_avatar.--head {
	width: 28px;
	height: 28px;
}

.humanresources-tree__node_avatar.--head.--collapsed {
	width: 20px;
	height: 20px;
}