ï»¿
Your IP : 172.70.127.68

Current Path : /var/www/element/data/www/revenuestory.ru/bitrix/js/ui/avatar-editor/src/css/
Current File : /var/www/element/data/www/revenuestory.ru/bitrix/js/ui/avatar-editor/src/css/core_avatar_editor.css
/* 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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjIiIHZpZXdCb3g9IjAgMCA4IDIiPjxwYXRoIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjUiIGQ9Ik0wIDBoOHYySDB6Ii8+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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPjxnIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjUiPjxwYXRoIGQ9Ik0wIDNoOHYySDB6Ii8+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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDIyIDE4Ij48cGF0aCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC40MiAyLjY4aC00Ljc2NGMtLjM0LTEuMzQtLjY4LTIuNjgtMi4wNDItMi42OEg4LjE3QzYuODA2IDAgNi40NjYgMS4zNCA2LjEyNSAyLjY4SDEuMzZDLjYxNCAyLjY4IDAgMy4yODMgMCA0LjAydjEyLjA1OGMwIC43MzcuNjEzIDEuMzQgMS4zNiAxLjM0aDE5LjA2Yy43NSAwIDEuMzYzLS42MDMgMS4zNjMtMS4zNFY0LjAyYzAtLjczNy0uNjEzLTEuMzQtMS4zNjItMS4zNHpNNy4yMjQgMTAuMDkyYzAgMi4wMTMgMS42NTcgMy42NDQgMy43MDIgMy42NDRzMy43MDMtMS42MyAzLjcwMy0zLjY0NGMwLTIuMDEyLTEuNjU4LTMuNjQ0LTMuNzAzLTMuNjQ0UzcuMjIzIDguMDggNy4yMjMgMTAuMDkyem0zLjcwMiA0Ljk3NmMtMi43OTIgMC01LjA1NS0yLjIyOC01LjA1NS00Ljk3NiAwLTIuNzQ4IDIuMjYzLTQuOTc1IDUuMDU1LTQuOTc1czUuMDU2IDIuMjI3IDUuMDU2IDQuOTc1YzAgMi43NDgtMi4yNjMgNC45NzYtNS4wNTUgNC45NzZ6bTkuMDE2LTkuNDZoLTEuODdWNC4zNmgxLjg3djEuMjQ3eiIvPjwvc3ZnPg==);
	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,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.4' fill-rule='evenodd' clip-rule='evenodd' d='M7.08741 5.48536L10.2905 8.68848L8.68897 10.29L5.48584 7.08692L2.28272 10.29L0.681152 8.68848L3.88428 5.48536L0.681152 2.28223L2.28272 0.680664L5.48584 3.88379L8.68897 0.680664L10.2905 2.28223L7.08741 5.48536Z' fill='%23525C69'/%3E%3C/svg%3E%0A");
	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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzYiIGhlaWdodD0iMTM4IiB2aWV3Qm94PSIwIDAgMTM2IDEzOCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxlbGxpcHNlIGlkPSJhIiBjeD0iNjgiIGN5PSI2OSIgcng9IjY4IiByeT0iNjkiLz48bWFzayBpZD0iYyIgd2lkdGg9IjEzNiIgaGVpZ2h0PSIxMzgiIHg9IjAiIHk9IjAiIGZpbGw9IiNmZmYiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48L21hc2s+PGVsbGlwc2UgaWQ9ImIiIGN4PSI2OCIgY3k9IjY5IiByeD0iNjgiIHJ5PSI2OSIvPjxtYXNrIGlkPSJlIiB3aWR0aD0iMTM2IiBoZWlnaHQ9IjEzOCIgeD0iMCIgeT0iMCIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYiIvPjwvbWFzaz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNTAzIj48bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYSIvPjwvbWFzaz48dXNlIGZpbGw9IiM4MDg2OEUiIHN0cm9rZT0iIzgwODY4RSIgc3Ryb2tlLXdpZHRoPSIxNiIgbWFzaz0idXJsKCNjKSIgeGxpbms6aHJlZj0iI2EiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTE4LjI0NiAxNDcuNDc0YzAtNi45Ni03LjYxLTM2LjQwMy03LjYxLTM2LjQwMyAwLTQuMzAzLTUuNDgyLTkuMjE4LTE2LjI3Ni0xMi4wODMtMy42NTctMS4wNDYtNy4xMzMtMi42Ny0xMC4zMDUtNC44MS0uNjkzLS40MDgtLjU4OC00LjE2Ni0uNTg4LTQuMTY2bC0zLjQ3Ni0uNTQyYzAtLjMwNS0uMjk2LTQuODEyLS4yOTYtNC44MTIgNC4xNi0xLjQzNCAzLjczLTkuODk2IDMuNzMtOS44OTYgMi42NDMgMS41MDQgNC4zNjMtNS4xOTIgNC4zNjMtNS4xOTIgMy4xMjQtOS4zMDMtMS41NTYtOC43NC0xLjU1Ni04Ljc0LjgyLTUuNjguODItMTEuNDUyIDAtMTcuMTMtMi4wOC0xOC44NC0zMy40MDgtMTMuNzI2LTI5LjY5My03LjU3My05LjE1Ni0xLjczLTcuMDY3IDE5LjY0OC03LjA2NyAxOS42NDhsMS45ODYgNS41MzdjLTMuOSAyLjU5Ni0xLjE5IDUuNzM1LTEuMDU0IDkuMzQ4LjE5MiA1LjMzNiAzLjM3MyA0LjIzIDMuMzczIDQuMjMuMTk2IDguODA2IDQuNDI3IDkuOTUyIDQuNDI3IDkuOTUyLjc5NSA1LjUzLjMgNC41OS4zIDQuNTlsLTMuNzY1LjQ2NmMuMDUgMS4yNTgtLjA1IDIuNTE3LS4yOTggMy43NS00LjQyOCAyLjAyNS01LjM4IDMuMjEyLTkuNzggNS4xOTItOC41IDMuODIzLTE3Ljc0IDguNzk1LTE5LjM4IDE1LjQ5LTEuNjQ0IDYuNjkzLTYuNTI2IDMzLjE0Ni02LjUyNiAzMy4xNDZoOTkuNDkyeiIgbWFzaz0idXJsKCNkKSIvPjx1c2Ugc3Ryb2tlPSIjODA4NjhFIiBzdHJva2Utd2lkdGg9IjE2IiBtYXNrPSJ1cmwoI2UpIiB4bGluazpocmVmPSIjYiIvPjwvZz48L3N2Zz4=);
	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 */
	-khtml-user-select: none; /* Konqueror */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* 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,%3Csvg width='22' height='22' viewBox='0 0 22 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.90574 12.249L15.7153 6.51367L17.4734 8.28153L9.93321 15.7571L9.90574 15.7295L9.87827 15.7571L5.26562 11.2926L7.02373 9.52478L9.90574 12.249Z' fill='white'/%3E%3C/svg%3E%0A");
	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,%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 1 0 0-3.328 1.664 1.664 0 0 0 0 3.328ZM6.656 3.328a1.664 1.664 0 1 0 0-3.328 1.664 1.664 0 0 0 0 3.328ZM13.311 1.664a1.664 1.664 0 1 1-3.327 0 1.664 1.664 0 0 1 3.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,%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 1 0 0-3.328 1.664 1.664 0 0 0 0 3.328ZM6.656 3.328a1.664 1.664 0 1 0 0-3.328 1.664 1.664 0 0 0 0 3.328ZM13.311 1.664a1.664 1.664 0 1 1-3.327 0 1.664 1.664 0 0 1 3.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,%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,%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 13 .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,%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 0 0-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,%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 0 0-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 0 0 30.68 0c-8.846 0-16.129 6.631-17.06 15.15a9.933 9.933 0 0 0-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,%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 0 0-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 0 0-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,%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,%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.993 14.99 8.97l.018 3.002h2.979a5.013 5.013 0 1 1 0 10.027h-3.853c-.347 0-.686-.035-1.013-.102v-1.954c.187.037.38.056.578.056h4.022a2.998 2.998 0 0 0 0-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;
}