.personaimagepicker {

}

.personaimagepicker .editor,
.personaimagepicker.editing .main {
	display: none
}
.personaimagepicker.editing .editor {
	display: block;
}

.personaimagepicker .user-image{
	width: 200px;
	height: 200px;
	background-size: cover;
	border-radius: 50%;
	margin: 15px auto;
}

.personaimagepicker .filePicker {
	display: none
}


.personaimagepicker .page {
  margin: 1em auto;
  max-width: 768px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 100%;
}

 .personaimagepicker  .cropper-view-box,
 .personaimagepicker  .cropper-face {
    border-radius: 50%;
  }
  
.personaimagepicker .box {
  padding: 0.5em;
  width: 100%;
  margin:0.5em;
}

.personaimagepicker .box-2 {
  padding: 0.5em;
  width: 100%;
}

.personaimagepicker .options label,
.personaimagepicker .options input{
  width:4em;
  padding:0.5em 1em;
}
.personaimagepicker .btn{
  background:white;
  color:black;
  border:1px solid black;
  padding: 0.5em 1em;
  text-decoration:none;
  margin:0.8em 0.3em;
  display:inline-block;
  cursor:pointer;
}

.personaimagepicker .hide {
  display: none;
}

.personaimagepicker img {
  width: 100%;
  border-radius: 50%;
  background-color: #f0f0f0;
}

.personaimagepicker .result img {
  border-radius: 0;
}

.personaimagepicker .addButton {
	width: 55px;
	height: 55px;
	background-image: url(http://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/v2/navigation/add-button@3x.png);
	background-size: 55px 55px;
	position: absolute;
	right: 20px;
    bottom: 0;
}
.personaimagepicker .main {
	width: 200px;
    margin: auto;
    position: relative;
}

.personaimagepicker .heading {
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 10px;
    background: #f0f0f0;
}