/*// Avatar*/
.avatar {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 3rem;
}


.avatar-xs {
    width: 1.5rem;
    height: 1.5rem;
}



.avatar-sm {
    width: 2rem;
    height: 2rem;
}

.avatar-md {
    width: 2.5rem;
    height: 2.5rem;
}

.avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
}

.avatar-xl {
    width: 5rem;
    height: 5rem;
}

.avatar-xxl {
    width: 7.5rem;
    height: 7.5rem;
}


.avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.avatar-indicators {
  position: relative;
}

.avatar-indicators:before {
  content: '';
  position: absolute;
  bottom: 0px;
  right: 5%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  border: 2px solid var(--#{$prefix}white);
  display: table;
}

.avatar-xxl.avatar-indicators:before {
  bottom: 5px;
  right: 17%;
  width: 16%;
  height: 16%;
}


.avatar-offline:before {
  background-color: var(--#{$prefix}gray-400);
}

.avatar-online:before {
  background-color: $success;
}

.avatar-away:before {
  background-color: $warning;
}

.avatar-busy:before {
  background-color: $danger;
}

.avatar-info:before {
  background-color: $info;
}


.avatar-initials {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  text-transform: uppercase;
}


.avatar-primary .avatar-initials {
  color: var(--#{$prefix}white);
  background-color: $primary;
}
.avatar-secondary .avatar-initials {
  color: var(--#{$prefix}white);
  background-color: $secondary;
}
.avatar-success .avatar-initials {
  color: var(--#{$prefix}white);
  background-color: $success;
}
.avatar-warning .avatar-initials {
  color: var(--#{$prefix}white);
  background-color: $warning;
}
.avatar-info .avatar-initials {
  color: var(--#{$prefix}white);
  background-color: $info;
}
.avatar-danger .avatar-initials {
  color: var(--#{$prefix}white);
  background-color: $danger;
}
.avatar-light .avatar-initials {
  color: var(--#{$prefix}white);
  background-color: $light;
}
.avatar-dark .avatar-initials {
  color: var(--#{$prefix}white);
  background-color: $dark;
}


.avatar-group .avatar + .avatar {
  margin-left: -1.2rem;
}

.avatar-group .avatar:hover {
  z-index: 2;
}


.avatar-group img,
.avatar-group .avatar .avatar-initials {
  border: 2px solid var(--#{$prefix}white);
}