.settings-avatar {
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    position: relative;
}
.settings-avatar::before {
    content: '';
    display: block;
    padding-top: 100%;
}
.settings-avatar div {
    position: absolute;
    bottom: 15px;
    color: #fff;
    padding: 4px 15px;
    border-radius: 20px;
    width: 120px;
    left: 50%;
    margin-left: -60px;
    text-shadow: #696767 0px 0px 4px;
    text-align: center;
}
.settings-avatar.status-success div {
    background-color: #0cc285;
}
.settings-avatar.status-warning div {
    background-color: #ffc107;
}
.settings-avatar.status-danger div {
    background-color: #ff0084;
}
.add-avatar-button {
    border: 5px #999 dashed;
    border-radius: 50%;
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../images/plus.svg");
    cursor: pointer;
}
.add-avatar-button:hover {
    border-color: #666;
    background-image: url("../images/plus-hover.svg");
}
.add-avatar-button::before {
    content: '';
    display: block;
    padding-top: 100%;
}
.cropper-wrapper img {
    max-width: 100%;
}