/* MAIN FILE INPUT POPUP CONTAINER */

.main-file-input-container {
	width: 620px;
	color: #535C69;
}

/* STATEMENTS */
.main-file-input-control-slide-drag-state {
	box-shadow: 0 0 5px #8a9196;
}

.main-file-input-tab-button-item.main-file-input-tab-button-active {
	top: 0;
	height: 40px;
	border: 1px solid #C6CDD3;
	border-bottom: 0;
	background: rgba(247,249,250,1);
}

.main-file-input-button-layout.main-file-input-button-make-photo-state .main-file-input-button-name {
	display: inline-block;
}

.main-file-input-button-layout.main-file-input-button-upload-photo-state .main-file-input-button-icon {
	display: none;
}

.main-file-input-button-layout.main-file-input-button-upload-photo-state .main-file-input-button-name {
	display: inline-block;
	margin: auto 0;
}

/* END OF STATEMENTS */



/* CONTROL */
.main-file-input-control {
	position: absolute;
	right: 5px;
	top: 12px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 117px;
	height: 18px;
	border-radius: 64px;
	background: rgba(82,92,104,.5);
	z-index: 1;
}

.main-file-input-control-inner {
	position: relative;
	margin: auto;
	width: 87px;
	height: 12px;
	border-radius: 64px;
	background: rgba(255,255,255,.23);
}

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

.main-file-input-control-controller {
	width: 15px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
	cursor: pointer;
}

.main-file-input-control-controller:hover {
	opacity: .5;
}

.main-file-input-control-minus {
	display: inline-block;
	width: 8px;
	height: 2px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjIiIHZpZXdCb3g9IjAgMCA4IDIiPjxwYXRoIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjUiIGQ9Ik0wIDBoOHYySDB6Ii8+PC9zdmc+);
	background-repeat: no-repeat;
}

.main-file-input-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 */

.main-file-input-button-layout {
	position: absolute;
	left: 50%;
	bottom: -16px;
	border-radius: 64px;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
}

.main-file-input-button {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0 12px;
	height: 28px;
	min-width: 75px;
	border: 3px solid #F7F9FA;
	border-radius: 64px;
	font: bold 11px/24px 'Open Sans', "Helvetica Neue", Arial, Helvetica, sans-serif;
	color: #fff;
	text-align: center;
	background: #3BC8F5;
	-webkit-transition: background .3s;
	transition: background .3s;
	cursor: pointer;
}

.main-file-input-button:hover {
	background: #3fddff;
}

.main-file-input-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;
}

.main-file-input-button-name {
	display: none;
	margin: auto 0 auto 8px;
	line-height: 27px;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/* END OF MAIN BUTTON */

/* TAB BLOCK */

.main-file-input-tab-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 18px 17px 18px 17px;
	height: 330px;
	border: 1px solid #C6CDD3;
	border-radius: 0 2px 2px 2px;
	background: rgba(247,249,250,1);
}

/* AVATAR BLOCK */

.main-file-input-arrow-icon-container {
	position: absolute;
	top: 60px;
	left: 25px;
}

.main-file-input-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;
}

.main-file-input-tab-avatar-block {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	/*margin: auto 0 auto auto;*/
}

.main-file-input-tab-avatar-inner {
	position: relative;
	width: 255px;
}

.main-file-input-tab-avatar-image-container {
	margin: 0 0 30px 0;
	text-align: center;
}

.main-file-input-tab-avatar-image-item {
	overflow: hidden;
	display: inline-block;
	width: 136px;
	height: 136px;
	border-radius: 100%;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzYiIGhlaWdodD0iMTM4IiB2aWV3Qm94PSIwIDAgMTM2IDEzOCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxlbGxpcHNlIGlkPSJhIiBjeD0iNjgiIGN5PSI2OSIgcng9IjY4IiByeT0iNjkiLz48bWFzayBpZD0iYyIgd2lkdGg9IjEzNiIgaGVpZ2h0PSIxMzgiIHg9IjAiIHk9IjAiIGZpbGw9IiNmZmYiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48L21hc2s+PGVsbGlwc2UgaWQ9ImIiIGN4PSI2OCIgY3k9IjY5IiByeD0iNjgiIHJ5PSI2OSIvPjxtYXNrIGlkPSJlIiB3aWR0aD0iMTM2IiBoZWlnaHQ9IjEzOCIgeD0iMCIgeT0iMCIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYiIvPjwvbWFzaz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNTAzIj48bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYSIvPjwvbWFzaz48dXNlIGZpbGw9IiM4MDg2OEUiIHN0cm9rZT0iIzgwODY4RSIgc3Ryb2tlLXdpZHRoPSIxNiIgbWFzaz0idXJsKCNjKSIgeGxpbms6aHJlZj0iI2EiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTE4LjI0NiAxNDcuNDc0YzAtNi45Ni03LjYxLTM2LjQwMy03LjYxLTM2LjQwMyAwLTQuMzAzLTUuNDgyLTkuMjE4LTE2LjI3Ni0xMi4wODMtMy42NTctMS4wNDYtNy4xMzMtMi42Ny0xMC4zMDUtNC44MS0uNjkzLS40MDgtLjU4OC00LjE2Ni0uNTg4LTQuMTY2bC0zLjQ3Ni0uNTQyYzAtLjMwNS0uMjk2LTQuODEyLS4yOTYtNC44MTIgNC4xNi0xLjQzNCAzLjczLTkuODk2IDMuNzMtOS44OTYgMi42NDMgMS41MDQgNC4zNjMtNS4xOTIgNC4zNjMtNS4xOTIgMy4xMjQtOS4zMDMtMS41NTYtOC43NC0xLjU1Ni04Ljc0LjgyLTUuNjguODItMTEuNDUyIDAtMTcuMTMtMi4wOC0xOC44NC0zMy40MDgtMTMuNzI2LTI5LjY5My03LjU3My05LjE1Ni0xLjczLTcuMDY3IDE5LjY0OC03LjA2NyAxOS42NDhsMS45ODYgNS41MzdjLTMuOSAyLjU5Ni0xLjE5IDUuNzM1LTEuMDU0IDkuMzQ4LjE5MiA1LjMzNiAzLjM3MyA0LjIzIDMuMzczIDQuMjMuMTk2IDguODA2IDQuNDI3IDkuOTUyIDQuNDI3IDkuOTUyLjc5NSA1LjUzLjMgNC41OS4zIDQuNTlsLTMuNzY1LjQ2NmMuMDUgMS4yNTgtLjA1IDIuNTE3LS4yOTggMy43NS00LjQyOCAyLjAyNS01LjM4IDMuMjEyLTkuNzggNS4xOTItOC41IDMuODIzLTE3Ljc0IDguNzk1LTE5LjM4IDE1LjQ5LTEuNjQ0IDYuNjkzLTYuNTI2IDMzLjE0Ni02LjUyNiAzMy4xNDZoOTkuNDkyeiIgbWFzaz0idXJsKCNkKSIvPjx1c2Ugc3Ryb2tlPSIjODA4NjhFIiBzdHJva2Utd2lkdGg9IjE2IiBtYXNrPSJ1cmwoI2UpIiB4bGluazpocmVmPSIjYiIvPjwvZz48L3N2Zz4=);
	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%);
}
.main-file-input-tab-avatar-image-item.active {
	cursor: pointer;
}
.main-file-input-tab-avatar-desc-container {
	margin: 0 auto;
	max-width: 110px;
	font: 15px/17px "Helvetica Neue", Arial, Helvetica, sans-serif;
	color: rgba(83,92,105,.5);
	text-align: center;
}

/* END OF AVATAR BLOCK */

/* BASIC CONTENT BLOCK */
.main-file-input-content-block {
	position: relative;
	width: 330px;
	box-sizing: border-box;
}
/* END OF BASIC CONTENT BLOCK */


/* CANVAS BLOCK */
.main-file-input-canvas-block .main-file-input-button-icon {
	display: none;
}
.main-file-input-canvas-block .main-file-input-button-name {
	display: inline-block;
}
/* END CANVAS BLOCK */
/* UPLOAD BLOCK */
.main-file-input-upload-block {
	padding: 10px;
	border: 2px dashed rgba(82,92,104,.36);
	border-radius: 3px;
	background: #fff;
}
.main-file-input-upload-block.dnd-over {
	border-style: solid;
}
.main-file-input-upload-link-container {
	position: absolute;
	top: 44%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-44%);
	text-align: center;
}

.main-file-input-upload-link {
	display: inline-block;
	margin: 0 0 12px 0;
	font: bold 18px/23px "Helvetica Neue", Arial, Helvetica, sans-serif;
	color: #1169C3;
	border-bottom: 1px solid rgba(17,105,195,.5);
	-webkit-transition: border-bottom .3s;
	transition: border-bottom .3s;
	cursor: pointer;
	position: relative;
}

.main-file-input-upload-link:hover {
	border-bottom: 1px solid transparent;
}
.main-file-input-upload-link input {
	display: none;
}

.main-file-input-upload-desc {
	font: 12px/14px "Helvetica Neue", Arial, Helvetica, sans-serif;
	color: rgba(82,92,104,.5);
}

.main-file-input-upload-info {
	position: absolute;
	bottom: 20px;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	font: italic 12px/14px "Helvetica Neue", Arial, Helvetica, sans-serif;
	color: rgba(82,92,104,.5);
	text-align: center;
}
/* END OF UPLOAD BLOCK */

/* TAB BUTTONS */

.main-file-input-tab-button-container {
	height: 40px;
}

.main-file-input-tab-button-item {
	position: relative;
	top: 2px;
	display: inline-block;
	padding: 0 22px;
	margin: 0 3px 0 0;
	height: 38px;
	border-radius: 2px 2px 0 0;
	background: rgba(82,92,104,.07);
	font: bold 13px/38px "Helvetica Neue", Arial, Helvetica, sans-serif;
	cursor: pointer;
}

.main-file-input-tab-button-item:last-child {
	margin: 0;
}

/* END OF TAB BUTTONS */

/* CAMERA BLOCK */

.main-file-input-camera-block-image {
	display: block;
	width: 330px;
	height: 330px;
	overflow: hidden;
	position: relative;
}
.main-file-input-camera-block-image-inner {
	width: 100%;
	height: 100%;
}

.main-file-input-error {
	color: red;
	position: absolute;
	top: 40%;
	width: 100%;
	display: none;
}
.main-file-input-content-block.errored .main-file-input-error {
	display: block;
}
.main-file-input-user-loader-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 100px;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.main-file-input-loader {
	position: relative;
	height: 100%;
	min-height: 100px;
	width: 100%;
	&:before {
		content: '';
		display: block;
		padding-top: 100%;
	}
}

.main-file-input-circular {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 50px;
	width: 50px;
	-webkit-animation: rotate 2s linear infinite;
	animation: rotate 2s linear infinite;
	-webkit-transform-origin: center center;
	transform-origin: center center;
}

.main-file-input-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;
	}
}
.main-file-input-content-block.errored .main-file-input-user-loader-item {
	display: none;
}

.main-file-input-camera-block-image video {
	position: absolute;
}
/* END OF CAMERA BLOCK */

/* END OF TAB BLOCK */
.main-file-input-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 MAIN FILE INPUT POPUP CONTAINER */