.avatar{
  position: relative;
  display: inline-block;
  width: 40px;
  line-height: 1;
  border-radius: 500px;
  white-space: nowrap;
  font-weight: bold;
  img{
    border-radius: 500px;
    width: 100%;
  }
  i{
    position: absolute;
    left: 0;
    top:  0;
    width:  10px;
    height: 10px;
    margin: 1px;
    border-width:  2px;
    border-style:  solid;
    border-radius: 100%;
    &.right{
      left: auto;
      right: 0;
    }
    &.bottom{
      left: auto;
      top: auto;
      bottom: 0;
      right: 0;
    }
    &.left{
      top: auto;
      bottom: 0;
    }
    &.on{
      background-color: $success;
    }
    &.off{
      background-color: $light;
    }
    &.away{
      background-color: $warning;
    }
    &.busy{
      background-color: $danger;
    }
  }
  &.w-32{
    i{
      margin: 0px;
    }
  }
  &.w-48{
    i{
      margin: 2px;
    }
  }
  &.w-56{
    i{
      margin: 3px;
    }
  }
  &.w-64{
    i{
      margin: 4px;
    }
  }
  &.w-96{
    i{
      margin: 9px;
    }
  }
  &.w-128{
    i{
      margin: 14px;
    }
  }
}