/**
 * AvatarPicker css
 */
.user-avatar{
	cursor: pointer;
	width: 60px;
	height: 60px;
	overflow: hidden;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.edit-avatar{
	position: relative;
	display: inline-block;
	float: left;

	width: 60px;
	height: 60px;
	overflow: hidden;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.edit-avatar .user-avatar{
	cursor: pointer;
}
.edit-avatar .edit-overlay{
	opacity: 0;
	pointer-events: none;
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.5);

	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.edit-avatar .edit-overlay .fa{
	color: rgba(255,255,255, 0.9);
	margin: 21px 0 0 21px;
	font-size: 21px;
}
.edit-avatar:hover .edit-overlay{
	opacity: 1;
}
.user-avatar.empty{
	border: 1px solid #ccc;
	background: #EAEAEA;
}
.user-avatar.empty .icon-user{
	font-size: 24px;
	width: 100%;
	margin: 17px 0 0 1px;
	text-align: center;
}
.user-avatar img{
	object-fit: cover;
	height: 60px;
	width: 60px;
}

.avatar-picker-modal .btn-method{
	cursor: pointer;
	background: #EFEFEF;
	font-size: 16px;
	padding: 30px 20px;
	margin: 10px 5px;
	text-align: center;

	-webkit-border-radius: 6px;
	border-radius: 6px;

	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.avatar-picker-modal .btn-method .fa{
	font-size: 20px;
	margin: 16px 0 0;
}
.avatar-picker-modal .btn-method:hover{
	background: #DDD;
}

.avatar-picker-modal .alert-box{
	display: none;
}
.avatar-picker-modal .tab{
	display: none;
}
.avatar-picker-modal #webcam-canvas{
	margin: 0 auto;
	-webkit-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}
.avatar-picker-modal .btn-capture{
	width: 480px;
	margin: 0 auto;
	display: block;
	-webkit-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}
.avatar-picker-modal .btn .fa{
	margin-right: 6px;
}
.avatar-picker-modal #croppie-wrap{
	width: 360px;
	margin: 0 auto 45px;
}
.avatar-picker-modal .croppie-container .cr-slider-wrap{
	width: auto;
	margin: 8px auto;
}
.avatar-picker-modal .btn-crop{
	display: block;
	margin: 0 auto;
	width: 110px;
}
.avatar-picker-modal .btn-remove-avatar{
	margin: 10px 8px 3px 0;
	text-align: right;
	display: none;
}