/* region VARIABLES */

.ui-avatar-editor--scope {
	--color_dark-gray: #535c69;
	--color_dark-gray-5:  rgba(82,92,104,.5);
	--border-radius-control: 64px;
}

/* endregion */

/* MAIN FILE INPUT POPUP CONTAINER */

.ui-avatar-editor__container {
	width: 620px;
	color: var(--color_dark-gray);
}

/* STATEMENTS */
.ui-avatar-editor__control-slide-drag-state {
	box-shadow: 0 0 5px #8a9196;
}

.ui-avatar-editor__tab-button-item.ui-avatar-editor__tab-button-active {
	top: 0;
	height: 40px;
	border: 1px solid #c6cdd3;
	border-bottom: 0;
	background: rgba(247,249,250,1);
}

/* END OF STATEMENTS */

/* CONTROL */
.ui-avatar-editor__control {
	position: absolute;
	right: 5px;
	top: 12px;
	display: flex;
	width: 117px;
	height: 18px;
	border-radius: var(--border-radius-control, 64px);
	background: var(--color_dark-gray-5);
	z-index: 1;
}

.ui-avatar-editor__control-inner {
	position: relative;
	margin: auto;
	width: 87px;
	height: 12px;
	border-radius: var(--border-radius-control, 64px);
	background: rgba(255,255,255,.23);
}

.ui-avatar-editor__control-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 21px;
	height: 12px;
	border-radius: var(--border-radius-control, 64px);
	background: rgba(255,255,255,.74);
	transition: box-shadow .4s;
	cursor: pointer;
}

.ui-avatar-editor__control-controller {
	width: 15px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .3s;
	cursor: pointer;
}

.ui-avatar-editor__control-controller:hover {
	opacity: .5;
}

.ui-avatar-editor__control-minus {
	display: inline-block;
	width: 8px;
	height: 2px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjIiPjxwYXRoIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjUiIGQ9Ik0wIDBoOHYySDB6Ii8+PC9zdmc+);
	background-repeat: no-repeat;
}

.ui-avatar-editor__control-plus {
	display: inline-block;
	width: 9px;
	height: 8px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxnIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjUiPjxwYXRoIGQ9Ik0wIDNoOHYySDB6Ii8+PHBhdGggZD0iTTMgOFYwaDJ2OHoiLz48L2c+PC9zdmc+);
	background-repeat: no-repeat;
}

/* END OF CONTROL */

/* MAIN BUTTON */

.ui-avatar-editor__button-layout {
	position: absolute;
	left: 50%;
	bottom: -16px;
	border-radius: var(--border-radius-control, 64px);
	transform: translate(-50%,0);
	display: flex;
	justify-content: center;
	width: 100%;
}

.ui-avatar-editor__button {
	display: flex;
	justify-content: center;
	padding: 0 12px;
	height: 28px;
	min-width: 75px;
	border: 3px solid #f7f9fa;
	border-radius: var(--border-radius-control, 64px);
	font-size: var(--ui-font-size-3xs, 11px);
	line-height: 24px;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-bold, 700);
	color: var(--ui-color-palette-white-base, #fff);
	text-align: center;
	background: #3bc8f5;
	transition: background .3s;
	cursor: pointer;
}

.ui-avatar-editor__button + .ui-avatar-editor__button {
	margin-left: 5px;
}

.ui-avatar-editor__button:hover {
	background: #3fddff;
}

.ui-avatar-editor__button-icon {
	display: inline-block;
	margin: auto 0;
	width: 22px;
	height: 18px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIxOCI+PHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjAuNDIgMi42OGgtNC43NjRjLS4zNC0xLjM0LS42OC0yLjY4LTIuMDQyLTIuNjhIOC4xN0M2LjgwNiAwIDYuNDY2IDEuMzQgNi4xMjUgMi42OEgxLjM2Qy42MTQgMi42OCAwIDMuMjgzIDAgNC4wMnYxMi4wNThjMCAuNzM3LjYxMyAxLjM0IDEuMzYgMS4zNGgxOS4wNmMuNzUgMCAxLjM2My0uNjAzIDEuMzYzLTEuMzRWNC4wMmMwLS43MzctLjYxMy0xLjM0LTEuMzYyLTEuMzR6TTcuMjI0IDEwLjA5MmMwIDIuMDEzIDEuNjU3IDMuNjQ0IDMuNzAyIDMuNjQ0czMuNzAzLTEuNjMgMy43MDMtMy42NDRjMC0yLjAxMi0xLjY1OC0zLjY0NC0zLjcwMy0zLjY0NFM3LjIyMyA4LjA4IDcuMjIzIDEwLjA5MnptMy43MDIgNC45NzZjLTIuNzkyIDAtNS4wNTUtMi4yMjgtNS4wNTUtNC45NzYgMC0yLjc0OCAyLjI2My00Ljk3NSA1LjA1NS00Ljk3NXM1LjA1NiAyLjIyNyA1LjA1NiA0Ljk3NWMwIDIuNzQ4LTIuMjYzIDQuOTc2LTUuMDU1IDQuOTc2em05LjAxNi05LjQ2aC0xLjg3VjQuMzZoMS44N3YxLjI0N3oiLz48L3N2Zz4=);
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.ui-avatar-editor__button-name {
	display: inline-block;
	margin: auto 0 auto 8px;
	line-height: 27px;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/* END OF MAIN BUTTON */

/* TAB BLOCK */

.ui-avatar-editor__tab-container {
	display: flex;
	padding: 18px 15px;
	height: 355px;
	border: 1px solid #c6cdd3;
	border-radius: 0 var(--ui-border-radius-2xs, 4px) var(--ui-border-radius-2xs, 4px) var(--ui-border-radius-2xs, 4px);
	background: rgba(247,249,250,1);
	min-width: 638px;
	justify-content: space-between;
	box-sizing: border-box;
}

/* AVATAR BLOCK */

.ui-avatar-editor__arrow-icon-container {
	position: absolute;
	top: 47%;
	left: -43px;
}

.ui-avatar-editor__arrow-icon {
	display: inline-block;
	width: 22px;
	height: 22px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiI+PHBhdGggZmlsbD0iIzAwQUVFRiIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNSIgZD0iTTIwLjEgOC44TDExLjMgMCA5LjQgMS45bDcuNSA3LjZIMHYyLjdoMTYuNmwtNy4yIDcuMyAxLjkgMS45IDguOC04LjggMS45LTEuOSIvPjwvc3ZnPg==);
	background-position: center;
	background-repeat: no-repeat;
}

.ui-avatar-editor__tab-avatar-block {
	display: flex;
	/*min-width: 221px;*/
	min-width: 243px;
	justify-content: center;
	align-items: center;
	/*padding: 5px 19px 0 0;*/
	padding: 0 0 20px 3px;
	box-sizing: border-box;
	/*margin: auto 0 auto auto;*/
}

.ui-avatar-editor__tab-avatar-inner {
	position: relative;
}

.ui-avatar-editor__tab-avatar-image-container {
	text-align: center;
	box-sizing: border-box;
}

.ui-avatar-editor__tab-avatar-image-not-allowed {
	display: block;
	position: absolute;
	right: 12px;
	top: 10px;
	width: 23px;
	height: 23px;
	border-radius: var(--ui-border-radius-circle, 50%);
	background-color: var(--ui-color-palette-white-base, #fff);
	box-shadow: 0 1px 3px rgba(0,0,0,.13);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='.4' fill-rule='evenodd' clip-rule='evenodd' d='M7.087 5.485l3.204 3.203-1.602 1.602-3.203-3.203-3.203 3.203L.68 8.688l3.203-3.203L.681 2.282 2.283.681l3.203 3.203L8.689.68l1.601 1.601-3.203 3.203z' fill='%23525C69'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	z-index: 1;
}

.ui-avatar-editor__tab-avatar-image-item {
	position: relative;
	overflow: hidden;
	display: inline-block;
	width: 165px;
	height: 165px;
	border-radius: var(--ui-border-radius-circle, 50%);
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzYiIGhlaWdodD0iMTM4IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGVsbGlwc2UgaWQ9ImEiIGN4PSI2OCIgY3k9IjY5IiByeD0iNjgiIHJ5PSI2OSIvPjxlbGxpcHNlIGlkPSJiIiBjeD0iNjgiIGN5PSI2OSIgcng9IjY4IiByeT0iNjkiLz48bWFzayBpZD0iYyIgd2lkdGg9IjEzNiIgaGVpZ2h0PSIxMzgiIHg9IjAiIHk9IjAiIGZpbGw9IiNmZmYiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48L21hc2s+PG1hc2sgaWQ9ImUiIHdpZHRoPSIxMzYiIGhlaWdodD0iMTM4IiB4PSIwIiB5PSIwIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNiIi8+PC9tYXNrPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii41MDMiPjxtYXNrIGlkPSJkIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjx1c2UgZmlsbD0iIzgwODY4RSIgc3Ryb2tlPSIjODA4NjhFIiBzdHJva2Utd2lkdGg9IjE2IiBtYXNrPSJ1cmwoI2MpIiB4bGluazpocmVmPSIjYSIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xMTguMjQ2IDE0Ny40NzRjMC02Ljk2LTcuNjEtMzYuNDAzLTcuNjEtMzYuNDAzIDAtNC4zMDMtNS40ODItOS4yMTgtMTYuMjc2LTEyLjA4M2EzNi4yNTUgMzYuMjU1IDAgMDEtMTAuMzA1LTQuODFjLS42OTMtLjQwOC0uNTg4LTQuMTY2LS41ODgtNC4xNjZsLTMuNDc2LS41NDJjMC0uMzA1LS4yOTYtNC44MTItLjI5Ni00LjgxMiA0LjE2LTEuNDM0IDMuNzMtOS44OTYgMy43My05Ljg5NiAyLjY0MyAxLjUwNCA0LjM2My01LjE5MiA0LjM2My01LjE5MiAzLjEyNC05LjMwMy0xLjU1Ni04Ljc0LTEuNTU2LTguNzRhNTkuOTUgNTkuOTUgMCAwMDAtMTcuMTNjLTIuMDgtMTguODQtMzMuNDA4LTEzLjcyNi0yOS42OTMtNy41NzMtOS4xNTYtMS43My03LjA2NyAxOS42NDgtNy4wNjcgMTkuNjQ4bDEuOTg2IDUuNTM3Yy0zLjkgMi41OTYtMS4xOSA1LjczNS0xLjA1NCA5LjM0OC4xOTIgNS4zMzYgMy4zNzMgNC4yMyAzLjM3MyA0LjIzLjE5NiA4LjgwNiA0LjQyNyA5Ljk1MiA0LjQyNyA5Ljk1Mi43OTUgNS41My4zIDQuNTkuMyA0LjU5bC0zLjc2NS40NjZhMTUuODMgMTUuODMgMCAwMS0uMjk4IDMuNzVjLTQuNDI4IDIuMDI1LTUuMzggMy4yMTItOS43OCA1LjE5Mi04LjUgMy44MjMtMTcuNzQgOC43OTUtMTkuMzggMTUuNDktMS42NDQgNi42OTMtNi41MjYgMzMuMTQ2LTYuNTI2IDMzLjE0Nmg5OS40OTJ6IiBtYXNrPSJ1cmwoI2QpIi8+PHVzZSBzdHJva2U9IiM4MDg2OEUiIHN0cm9rZS13aWR0aD0iMTYiIG1hc2s9InVybCgjZSkiIHhsaW5rOmhyZWY9IiNiIi8+PC9nPjwvc3ZnPg==);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 2px 14px rgba(0,0,0,.06);
	-webkit-transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

.ui-avatar-editor__tab-avatar-image-item.active {
	background: rgba(82,92,105,.23);
}

.ui-avatar-editor__tab-avatar-mask {
	top: -1px;
	left: -1px;
	position: absolute;
	overflow: hidden;
	display: inline-block;
	width: 167px;
	height: 167px;
	border-radius: var(--ui-border-radius-circle, 50%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

.ui-avatar-editor__tab-avatar-desc-container {
	margin: 0 auto;
	max-width: 110px;
	font-size: var(--ui-font-size-lg, 15px);
	line-height: 17px;
	color: rgba(83,92,105,.5);
	text-align: center;
}

/* END OF AVATAR BLOCK */

/* BASIC CONTENT BLOCK */
.ui-avatar-editor__content-block {
	position: relative;
	width: 330px;
	height: 318px;
	box-sizing: border-box;
}
/* END OF BASIC CONTENT BLOCK */


/* CANVAS BLOCK */
.ui-avatar-editor__user-avatar-item .ui-avatar-editor__tab-avatar-image-item {
	width: 330px;
	height: 335px;
	border-radius: 1%;
	box-shadow: none;
}
/* END CANVAS BLOCK */

/* UPLOAD BLOCK */
.ui-avatar-editor__upload-block {
	padding: 10px;
	border: 2px dashed rgba(82,92,104,.36);
	border-radius: var(--ui-border-radius-2xs, 4px);
	background: var(--ui-color-palette-white-base, #fff);
}

.ui-avatar-editor__upload-block.dnd-over {
	border-style: solid;
}

.ui-avatar-editor__upload-link-container {
	position: absolute;
	top: 44%;
	left: 50%;
	width: 100%;
	transform: translate(-50%,-44%);
	text-align: center;
}

.ui-avatar-editor__upload-link {
	display: inline-block;
	margin: 0 0 12px 0;
	font-size: var(--ui-font-size-2xl, 18px);
	line-height: 23px;
	font-weight: bold;
	color: #1169C3;
	border-bottom: 1px solid rgba(17,105,195,.5);
	transition: border-bottom .3s;
	cursor: pointer;
	position: relative;
}

.ui-avatar-editor__upload-link:hover {
	border-bottom: 1px solid transparent;
}
.ui-avatar-editor__upload-link input {
	display: none;
}

.ui-avatar-editor__upload-desc {
	font-size: var(--ui-font-size-xs, 12px);
	line-height: 14px;
	color: var(--color_dark-gray-5);
}

.ui-avatar-editor__upload-info {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%,0);
	font-size: var(--ui-font-size-xs, 12px);
	line-height: 14px;
	font-style: italic;
	color: var(--color_dark-gray-5);
	text-align: center;
}
/* END OF UPLOAD BLOCK */

/* TAB BUTTONS */

.ui-avatar-editor__tab-button-container {
	height: 40px;
}

.ui-avatar-editor__tab-button-item {
	position: relative;
	top: 2px;
	display: inline-block;
	padding: 0 22px;
	margin: 0 7px 0 0;
	height: 38px;
	border-radius: var(--ui-border-radius-2xs, 4px) var(--ui-border-radius-2xs, 4px) 0 0;
	background: rgba(82,92,104,.07);
	font-size: var(--ui-font-size-sm, 13px);
	line-height: 38px;
	font-weight: bold;
	cursor: pointer;
}

.ui-avatar-editor__tab-button-item:last-child {
	margin: 0;
}

/* END OF TAB BUTTONS */

/* CAMERA BLOCK */

.ui-avatar-editor__camera-block-image {
	display: block;
	width: 330px;
	height: 318px;
	overflow: hidden;
	position: relative;
}

.ui-avatar-editor__camera-block-image-inner {
	width: 100%;
	height: 100%;
}

.ui-avatar-editor__error {
	color: red;
	position: absolute;
	top: 40%;
	width: 100%;
	display: none;
}

.ui-avatar-editor__user-loader-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 100px;
	transform: translate(-50%, -50%);
}

.ui-avatar-editor__loader {
	position: relative;
	height: 100%;
	min-height: 100px;
	width: 100%;
}

.ui-avatar-editor__loader:before {
	 content: '';
	 display: block;
	 padding-top: 100%;
 }

.ui-avatar-editor__circular {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 50px;
	width: 50px;
	animation: rotate 2s linear infinite;
	transform-origin: center center;
}

.ui-avatar-editor__path {
	stroke: #3bc8f5;
	stroke-dasharray: 20, 200;
	stroke-dashoffset: 0;
	animation: dash 1.5s ease-in-out infinite;
	stroke-linecap: round;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35px;
	}
	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124px;
	}
}

.ui-avatar-editor__camera-block-image video {
	position: absolute;
}
/* END OF CAMERA BLOCK */

/* END OF TAB BLOCK */
.ui-avatar-editor__popup {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */ /* Firefox */ /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently*/
}

/* END OF POPUP CONTAINER */

.ui-avatar-editor__mask-block-content {
	margin-bottom: 20px;
	min-height: 300px;
}

.ui-avatar-editor__mask-block-list-container {
	margin: 13px 0 16px;
}

.ui-avatar-editor__mask-block-list-container:first-child {
	margin-top: 0;
}

.ui-avatar-editor__mask-block-title {
	font-weight: bold;
	font-size: var(--ui-font-size-sm, 13px);
	line-height: 16px;
	color: rgba(82,92,105,.87);
	margin: 0 0 6px 6px;
}

.ui-avatar-editor__mask-block-mask-box {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 6px;
}

.ui-avatar-editor__mask-block-mask-element {
	list-style-type: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	min-height: 154px;
	width: 102px;
	border-radius: var(--ui-border-radius-lg, 12px);
	padding: 12px 5px 8px;
	position: relative;
	transition: .2s;
	cursor: pointer;
	background: var(--ui-color-palette-white-base, #fff);
	border: 1px solid transparent;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
	margin: 0 12px 12px 0;
}

.ui-avatar-editor__mask-block-mask-element:nth-child(3n) {
	margin-right: 0;
}

.ui-avatar-editor__mask-block-mask-element::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 6px;
	top: 6px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='11' fill='%232FC6F6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.906 12.249l5.81-5.735 1.757 1.768-7.54 7.475-.027-.027-.028.027-4.612-4.464 1.758-1.768 2.882 2.724z' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: .2s;
	z-index: 1;
	opacity: 0;
}

.ui-avatar-editor__mask-block-mask-element::after {
	content: '';
	display: block;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: .2s;
	border: 2px solid #1ec4f7;
	border-radius: var(--ui-border-radius-lg, 12px);
	opacity: 0;
	z-index: 0;
}

.ui-avatar-editor__mask-block-menu-btn {
	position: absolute;
	right: 0;
	top: -2px;
	width: 24px;
	padding-right: 5px;
	transition: .2s;
}

.ui-avatar-editor__mask-block-menu-btn i {
	background-color: transparent;
}

.ui-avatar-editor__mask-block-menu-btn:hover {
	opacity: .7;
}

.ui-avatar-editor__mask-block-mask-element.--active,
.ui-avatar-editor__mask-block-mask-element:hover {
	border-color: transparent;
}

.ui-avatar-editor__mask-block-mask-element:hover::after,
.ui-avatar-editor__mask-block-mask-element.--active::after,
.ui-avatar-editor__mask-block-mask-element.--active::before {
	opacity: 1;
}

.ui-avatar-editor__mask-block-mask-image {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 72px;
	height: 72px;
	margin-bottom: 7px;
	border-radius: var(--ui-border-radius-circle, 50%);
}

.ui-avatar-editor__mask-title {
	display: block;
	margin: 0 0 13px 6px;
	font-size: var(--ui-font-size-sm, 13px);
	line-height: 18px;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
	color: #525c69;
	opacity: .87;
}

.ui-avatar-editor__menu-more {
	display: inline-block;
	width: 13px;
	height: 13px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.664 3.328a1.664 1.664 0 100-3.328 1.664 1.664 0 000 3.328zm4.992 0a1.664 1.664 0 100-3.328 1.664 1.664 0 000 3.328zm6.655-1.664a1.664 1.664 0 11-3.327 0 1.664 1.664 0 013.327 0z' fill='%23868686'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	transition: opacity .3s;
	cursor: pointer;
}

.ui-avatar-editor__menu-more:hover {
	opacity: .7;
}

.ui-avatar-editor__mask-title.--menuable .ui-avatar-editor__menu-more {
	position: relative;
	top: 2px;
	margin-left: 10px;
}

.ui-avatar-editor__mask-block-mask-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: var(--ui-font-size-3xs, 11px);
	line-height: 13px;
	text-align: center;
	color: var(--ui-color-palette-black-solid, #000);
	margin-bottom: 6px;
	max-width: 100%;
	overflow: hidden;
	overflow-wrap: break-word;
}

.ui-avatar-editor__mask-block-mask-subname {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	margin-top: auto;
	font-size: var(--ui-font-size-4xs, 10px);
	line-height: 12px;
	color: var(--ui-color-palette-black-solid, #000);
	overflow: hidden;
	opacity: .34;
}

.ui-avatar-editor__mask-block-mask-menu {
	position: absolute;
	top: 6px;
	right: 6px;
	display: block;
	width: 13px;
	height: 13px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.664 3.328a1.664 1.664 0 100-3.328 1.664 1.664 0 000 3.328zm4.992 0a1.664 1.664 0 100-3.328 1.664 1.664 0 000 3.328zm6.655-1.664a1.664 1.664 0 11-3.327 0 1.664 1.664 0 013.327 0z' fill='%23868686'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	transition: opacity .3s;
	cursor: pointer;
}

.ui-avatar-editor__mask-block-mask-menu:hover {
	opacity: .7;
}

.ui-avatar-editor__mask-block-mask-status {
	font-size: var(--ui-font-size-5xs, 9px);
	line-height: 12px;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	text-align: center;
	color: rgba(0,0,0,.34);
	margin-top: auto;
	max-width: 100%;
	overflow: hidden;
	/*overflow-wrap: break-word;*/
	text-overflow: ellipsis;
}

.ui-avatar-editor__content-block.ui-avatar-editor__mask-block {
	width: 362px;
	/*border-right: 1px solid rgba(82,92,105,.1);*/
}

.ui-avatar-editor__mask-block-container {
	overflow-y: auto;
	width: calc(100% - 12px);
	max-height: 100%;
	position: relative;
}

.ui-avatar-editor__mask-block-container::-webkit-scrollbar {
	width: 3px;
}

.ui-avatar-editor__mask-block-container::-webkit-scrollbar-track {
	background: transparent;
}

.ui-avatar-editor__mask-block-container::-webkit-scrollbar-thumb {
	background: rgba(121,129,140,.3);
	border-radius: var(--ui-border-radius-2xs, 4px);
	cursor: pointer;
	transition: .2s;
}
.popup-window-content-frame-item-menu .popup-window-content {
	background-color: transparent;
}

/*[data-bx-name="mask"] {*/
/*	margin-left: 2px;*/
/*	margin-right: -2px;*/
/*}*/

.ui-avatar-editor-list {
	margin: 0;
	padding: 0;
}

.ui-avatar-editor-list-item {
	position: relative;
	margin-bottom: 24px;
	padding-left: 40px;
	list-style: none;
}

.ui-avatar-editor-list-item-num {
	position: absolute;
	top: -6px;
	left: 0;
	display: inline-block;
	padding-top: 2px;
	width: 27px;
	height: 27px;
	border-radius: var(--ui-border-radius-circle, 50%);
	border: 2px solid #2FC6F6;
	font-size: var(--ui-font-size-lg, 15px);
	font-weight: bold;
	color: var(--ui-color-palette-black-base, #333);
	text-align: center;
	box-sizing: border-box;
}

.ui-avatar-editor-mask-file .ui-avatar-editor__tab-button-container {
	display: none;
}

.ui-avatar-editor-mask-file .ui-avatar-editor__tab-container {
	padding-left: 0;
	border: none;
	background-color: transparent;
}

.ui-avatar-editor-list-item .ui-form {
	padding: 18px 0 0 0;
}

.ui-avatar-editor-list-link-box {
	margin-top: 10px;
}

.ui-avatar-editor-list-link {
	margin-right: 32px;
}

.ui-avatar-editor-list-link:last-child {
	margin-right: 0;
}

.ui-avatar-editor__upload-error-container {
	display: none;
	position: absolute;
	top: 44%;
	left: 50%;
	max-width: 290px;
	width: 100%;
	transform: translate(-50%,-44%);
	text-align: center;
}

.ui-avatar-editor__upload-error-desc {
	margin-bottom: 30px;
	font-size: var(--ui-font-size-md, 14px);
}

.ui-avatar-editor__upload-error-desc div {
	display: block;
	color: #ff251f;
}

.ui-avatar-editor--error .ui-avatar-editor__upload-error-container {
	display: block;
}

.ui-avatar-editor--error.ui-avatar-editor__upload-block {
	margin-right: 24px;
	border-color: #fa726e;
	background: #fff7f7;
}

.ui-avatar-editor__mask-btn-load {
	position: relative;
	display: flex;
	align-items: center;
	padding: 11px;
	max-height: 60px;
	max-width: 330px;
	border-radius: var(--ui-border-radius-lg, 12px);
	background: radial-gradient(117.5% 3107.5% at 92.88% 17.5%, rgba(0,163,255,.76) 0%, rgba(47,198,246,.76) 100%);
	font-size: var(--ui-font-size-xl, 16px);
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	color: var(--ui-color-palette-white-base, #fff);
	box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .12);
	box-sizing: border-box;
	overflow: hidden;
	cursor: pointer;
}

.ui-avatar-editor__mask-block-content .ui-avatar-editor__mask-btn-load {
	margin: 0 0 6px 6px;
}

.ui-avatar-editor__mask-btn-load-icon {
	position: relative;
	display: inline-flex;
	margin-right: 6px;
	width: 40px;
	height: 40px;
	border-radius: var(--ui-border-radius-circle, 50%);
	border: 1px solid rgba(255,255,255,.4);
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle opacity='.9' cx='15' cy='15' r='15' fill='%23fff'/%3E%3Cpath fill='%23A8CD40' d='M8 21h14v2H8z'/%3E%3C/svg%3E") center no-repeat;
	background-size: 30px;
}

.ui-avatar-editor__mask-btn-load-icon:before {
	content: '';
	position: absolute;
	top: 11px;
	left: 13px;
	width: 14px;
	height: 13px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23A8CD40' d='M5 0h4v9H5z'/%3E%3Cpath d='M7 13L.938 6.25h12.124L7 13z' fill='%23A8CD40'/%3E%3C/svg%3E") center no-repeat;
}

.ui-avatar-editor__mask-btn-load:hover .ui-avatar-editor__mask-btn-load-icon:before {
	animation: ui-avatar-editor__mask-btn-load .8s infinite;
}

@keyframes ui-avatar-editor__mask-btn-load {
	0% {
		top: 11px;
	}
	100% {
		top: 13px;
	}
}

.ui-avatar-editor__mask-btn-load span {
	margin-right: 3px;
	font-weight: bold;
}

.ui-avatar-editor__mask-btn-load-cloud {
	position: absolute;
	left: 35%;
	bottom: 0;
	width: 100px;
	height: 44px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='.2' d='M89.333 44C95.224 44 100 39.224 100 33.333c0-5.89-4.776-10.666-10.667-10.666-1.981 0-3.837.54-5.427 1.482C82.979 15.077 75.316 8 66 8c-2.966 0-5.765.718-8.232 1.988C53.841 3.975 47.051 0 39.333 0c-11.341 0-20.678 8.582-21.87 19.606a12.63 12.63 0 00-4.796-.94C5.67 18.667 0 24.339 0 31.334c0 6.772 5.314 12.303 12 12.65V44h77.333z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;
}

.ui-avatar-editor__mask-btn-load-cloud:before,
.ui-avatar-editor__mask-btn-load-cloud:after {
	content: '';
	position: absolute;
}

.ui-avatar-editor__mask-btn-load-cloud:before {
	right: -80px;
	bottom: -15px;
	width: 78px;
	height: 31px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='78' height='31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='.2' d='M69.68 34c4.595 0 8.32-3.69 8.32-8.242 0-4.553-3.725-8.243-8.32-8.243a8.34 8.34 0 00-4.233 1.145c-.723-7.01-6.7-12.478-13.967-12.478-2.314 0-4.497.554-6.421 1.536A17.186 17.186 0 0030.68 0c-8.846 0-16.129 6.631-17.06 15.15a9.933 9.933 0 00-3.74-.726c-5.457 0-9.88 4.382-9.88 9.788 0 5.233 4.145 9.507 9.36 9.775V34h60.32z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;
}

.ui-avatar-editor__mask-btn-load-cloud:after {
	top: -4px;
	right: -87px;
	width: 49px;
	height: 21px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='49' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='.2' d='M43.773 21C46.66 21 49 18.72 49 15.91c0-2.813-2.34-5.092-5.227-5.092-.97 0-1.88.258-2.66.707-.453-4.329-4.208-7.707-8.773-7.707a8.972 8.972 0 00-4.034.95C26.382 1.896 23.056 0 19.273 0 13.716 0 9.141 4.096 8.556 9.357a6.333 6.333 0 00-2.35-.448C2.78 8.91 0 11.616 0 14.954c0 3.233 2.604 5.872 5.88 6.038V21h37.893z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;
}

.ui-avatar-editor__mask-create-box {
	margin-left: 6px;
}

.ui-avatar-editor__mask-btn-add {
	position: relative;
	padding: 11px 11px 11px 57px;
	margin-bottom: 6px;
	height: 60px;
	max-width: 330px;
	border: 2px dashed rgba(82, 92, 105, .15);
	border-radius: var(--ui-border-radius-lg, 12px);
	font-size: var(--ui-font-size-sm, 13px);
	line-height: 31px;
	color: rgba(82, 92, 105, .5);
	transition: border-color .3s;
	box-sizing: border-box;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

.ui-avatar-editor__mask-btn-add:before {
	content: '';
	position: absolute;
	top: 10px;
	left: 11px;
	width: 34px;
	height: 34px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='34' height='34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.5' fill='%23525C69'%3E%3Cpath d='M16 0h2v34h-2V0z'/%3E%3Cpath d='M34 16v2H0v-2h34z'/%3E%3C/g%3E%3C/svg%3E") center no-repeat;
}

.ui-avatar-editor__mask-btn-add:hover {
	border-color: rgba(82, 92, 105, .30);
}

.ui-avatar-editor__mask-link {
	display: inline-block;
	font-size: var(--ui-font-size-xs, 12px);
	line-height: 14px;
	color: #0065a3;
	border-bottom: 1px dashed rgba(0, 101, 163, .4);
	transition: border-color .3s;
}

.ui-avatar-editor__mask-link:hover {
	border-color: transparent;
}

.ui-avatar-editor__btn-back {
	position: absolute;
	top: 14px;
	left: 14px;
	display: block;
	width: 34px;
	height: 34px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='34' height='34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Ccircle cx='17' cy='16' r='14' fill='%23fff'/%3E%3Cpath d='M10.734 12.993L14.99 8.97l.018 3.002h2.979a5.013 5.013 0 110 10.027h-3.853c-.347 0-.686-.035-1.013-.102v-1.954c.187.037.38.056.578.056h4.022a2.998 2.998 0 000-5.997h-2.7l.018 3.058-4.305-4.068z' fill='%23828B95'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' x='0' y='0' width='34' height='34' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_730_84255'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_730_84255' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
	cursor: pointer;
	z-index: 1;
}

.ui-avatar-editor-pagination {
	margin: 0 0 20px 6px;
}

[data-bx-role="bodies"] [data-bx-role="tab-body"] {
	display: none;
}
[data-bx-role="bodies"] [data-bx-role="tab-body"][data-bx-active="Y"] {
	display: block;
}

[data-bx-role="headers"] [data-bx-name="canvas"],
[data-bx-role="headers"] [data-bx-name="file"],
[data-bx-role="headers"] [data-bx-name="camera"],
[data-bx-role="headers"] [data-bx-name="file"] {
}
[data-bx-role="bodies"] [data-bx-name="canvas"],
[data-bx-role="bodies"] [data-bx-name="file"],
[data-bx-role="bodies"] [data-bx-name="camera"],
[data-bx-role="bodies"] [data-bx-name="file"] {
}

[data-bx-canvas-load-status='errored'] [data-bx-role="canvas-zooming"],
[data-bx-canvas-load-status='isnotset'] [data-bx-role="canvas-zooming"],
[data-bx-canvas-load-status='loading'] [data-bx-role="canvas-zooming"],
[data-bx-role="canvas-error"],
[data-bx-role="canvas-loader"],
[data-bx-role="canvas-holder"],
[data-bx-role="unset-canvas-mask"]
{
	display: none;
}
[data-bx-canvas-load-status='errored'] [data-bx-role="canvas-error"],
[data-bx-canvas-load-status='isnotset'] [data-bx-role="canvas-holder"],
[data-bx-canvas-load-status='loading'] [data-bx-role="canvas-loader"],

[data-badge-is-set='Y'] [data-bx-role="unset-canvas-mask"] {
	display: block;
}

[data-bx-role="mask-item-menu-pointer"] {
	z-index: 2;
}

[data-bx-canvas-load-status='isnotset'][data-bx-upload-tab-available='Y'][data-bx-camera-tab-available='N'] [data-bx-role="button-back"],
[data-bx-canvas-load-status][data-bx-camera-tab-available='N'] [data-bx-role="button-add-picture"][data-bx-id="snap-picture"] {
	display: none;
}