.tfret-avatar-container_old {
    position: relative;
    width: 120px;
    height: 120px;
}

.tfret-avatar_old {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #e6e6e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tfret-avatar_old .tfret-head_old {
    width: 40px;
    height: 40px;
    background: #bfc4c7;
    border-radius: 50%;
    margin-bottom: 8px;
}

.tfret-avatar_old .tfret-body_old {
    width: 70px;
    height: 35px;
    background: #bfc4c7;
    border-radius: 35px 35px 0 0;
}

.tfret-status_old {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    background: #00c853;
    border-radius: 50%;
    border: 3px solid #ffffff;
}

/*
##################################################################
*/ 

.tfret-avatar-container {
  --size: 120px;            /* Avatar size */
  --status-scale: 0.18;     /* Status = 18% of avatar */

  position: relative;
  width: var(--size);
  height: var(--size);
}

.tfret-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

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

.tfret-status {
  width: calc(var(--size) * var(--status-scale));
  height: calc(var(--size) * var(--status-scale));
  border-radius: 50%;
  /* background: #00c853; */
  position: absolute;
  bottom: calc(var(--size) * 0.05);
  right: calc(var(--size) * 0.05);
  border: calc(var(--size) * 0.03) solid #fff;
}

.tfret-avatar-status-online {
	/* background-color: #7bb13c; */
	background: #07c319;
}
.tfret-avatar-status-offline {
	/* background-color: #e84646; */
	background: #6a7073;
}
.tfret-avatar-status-away {
	background: #ffbc34;
}
.tfret-avatar-center {
	display: inline-block;
}