.avatar_wrapper { display: block; position: relative; overflow: hidden; backface-visibility: hidden; transform-style: preserve-3d; z-index: 1; text-decoration: none; -webkit-border-radius: 50%;  border-radius: 50%; text-align: center; width: 38px; height: 38px;}
.avatar_wrapper.is_online {overflow: visible;}
.avatar_wrapper.inline-block {display: inline-block;}
.avatar_wrapper img {position: relative; display: block; width: 100%;height: 100%;-webkit-border-radius: 50%;  border-radius: 50%;}
.avatar_wrapper .avatar_text {position: relative; display: block; width: 100%;height: 100%; text-align: center; pointer-events: none; text-transform: uppercase; -webkit-border-radius: 50%;  border-radius: 50%; max-width: none; background: #FF7878;color: #FFF !important; text-decoration: none !important; }

div.avatar_wrapper {pointer-events: none;}
a.avatar_wrapper:hover .avatar_text, a.avatar_wrapper:hover img {opacity:0.8; transition: opacity 0.2s;}

.avatar_wrapper.deleted {background: #ABA6CD;}

/*OLD DESIGN SYSTEM LEFTOVERS*/
.avatar_wrapper.size20 {width: 20px; height: 20px;} 		.avatar_wrapper.size20	.avatar_text {font-size: 8px !important; font-weight: 700; line-height: 20px}
.avatar_wrapper.size27 {width: 27px; height: 27px;} 		.avatar_wrapper.size27	.avatar_text {font-size: 12px !important; font-weight: 700; line-height: 27px}
.avatar_wrapper.size38 {width: 38px; height: 38px;} 		.avatar_wrapper.size38	.avatar_text {font-size: 14px !important; font-weight: 700; line-height: 38px}
.avatar_wrapper.size40 {width: 40px; height: 40px;} 		.avatar_wrapper.size40	.avatar_text {font-size: 14px !important; font-weight: 700; line-height: 40px}
.avatar_wrapper.size50 {width: 50px; height: 50px;} 		.avatar_wrapper.size50	.avatar_text {font-size: 18px !important; font-family: 'robotomedium'; font-weight: 500; line-height: 48px}
.avatar_wrapper.size122 {width: 122px; height: 122px;}	    .avatar_wrapper.size122	.avatar_text {font-size: 32px !important; line-height: 122px}


/*NEW DESIGN SYSTEM*/
.avatar_wrapper.size150 {width: 150px; height: 150px;}		.avatar_wrapper.size150	.avatar_text {font-size: 32px !important; line-height: 150px}
.avatar_wrapper.size100 {width: 100px; height: 100px;} 		.avatar_wrapper.size100	.avatar_text {font-size: 26px !important; line-height: 100px}
.avatar_wrapper.size80 {width: 80px; height: 80px;} 		.avatar_wrapper.size80	.avatar_text {font-size: 22px !important; font-family: 'robotomedium'; font-weight: 500; line-height: 78px}
.avatar_wrapper.size60 {width: 60px; height: 60px;} 		.avatar_wrapper.size60	.avatar_text {font-size: 18px !important; font-family: 'robotomedium'; font-weight: 500; line-height: 58px}
.avatar_wrapper.size44 {width: 44px; height: 44px;} 		.avatar_wrapper.size44	.avatar_text {font-size: 16px !important; font-weight: 700; line-height: 44px}
.avatar_wrapper.size32 {width: 32px; height: 32px;} 		.avatar_wrapper.size32	.avatar_text {font-size: 12px !important; font-weight: 700; line-height: 32px}
.avatar_wrapper.size26 {width: 26px; height: 26px;} 		.avatar_wrapper.size26	.avatar_text {font-size: 12px !important; font-weight: 700; line-height: 26px}
.avatar_wrapper.is_online:before {content:''; display:block; position: absolute; bottom: 0; left: auto; right: 0; top: auto; width: 10px; height: 10px; background-color: var(--mt-color-success-500); border-radius: 50%; box-sizing: content-box; border: 2px solid white; z-index: 3;}
.avatar_wrapper.size26:before {width: 4px; height: 4px; border-width: 1px;}
.avatar_wrapper.size44:before,
.avatar_wrapper.size38:before {width: 8px; height: 8px; border-width: 2px;}
.avatar_wrapper.size32:before {width: 6px; height: 6px; border-width: 1px;}
.avatar_wrapper.size80:before {right: 2px; bottom: 2px;}