:root{
   
  
    --notis-avatar-height: 60px;
    --notis-avatar-width: 60px;
    --tiny-notis-avatar-height: 30px;
    --tiny-notis-avatar-width: 30px;

    --avatar-post-width: 58px;
    --avatar-post-height: 58px;

    --avatar-thread-width: 50px;
    --avatar-thread-height: 50px;
    
    --avatar-statistics-width: 196px;
    --avatar-statistics-height: 237px;

    --avatar-comment-width: 62px;
    --avatar-comment-height: 62px;
    
    --avatar-comment-hidden-width: 60px;
    --avatar-comment-hidden-height: 60px;

    --avatar-reply-width: 45px;
    --avatar-reply-height: 45px;

    --transform-avatar: scale(1.55) translateY(9%);
    --transform-avatar-reply: scaleX(-1);
    --hide-hand-fill: rgb(255, 255, 255);
    --avatar-bg-clr: #ffc0cb00;
    --avatar-hover: #E8F0FE;
}

.hide-hands-clr{
    fill: var(--hide-hand-fill);
}

/*--------------NOTIS----------------------*/
.avatar-wrapper.noti {
  position: relative;
  display: inline-block;
  width: var(--notis-avatar-width);
  height: var(--notis-avatar-height);
  border-radius: 50%;
margin-right: 5px;  
}

.avatar-wrapper.noti .avatar-container {
  position: absolute;
  width: var(--notis-avatar-width);
  height: var(--notis-avatar-height);
  background-color: #ffc0cb00;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}

.avatar-wrapper.noti svg {
  position: absolute;
  width: var(--notis-avatar-width);
  height: var(--notis-avatar-height);
  border-radius: 50%;
  transform: var(--transform-avatar);
  transform-origin: center center;
  top: 0;
  left: 0;
}

.avatar-wrapper.noti .hair-svg {
  position: relative;
  width: var(--notis-avatar-width);
  height: var(--notis-avatar-height);
  top: 0;
  left: 0;
  transform: var(--transform-avatar);
  transform-origin: center center;
  z-index: 2;
  pointer-events: none;
}

.avatar-wrapper.noti .hide-hands-overlay{
    position: absolute;
    width: var(--notis-avatar-width);
    height: var(--notis-avatar-height);
    transform: var(--transform-avatar);
    transform-origin: center center;
    z-index: 30;
    pointer-events: none;
}

.noti-logga{
  width: var(--notis-avatar-width);
  height: var(--notis-avatar-height);
}

/*--------------NOTIS----------------------*/
/*--------------TINY NOTIS----------------*/
.tiny-avatar-wrapper {
  position: absolute;
  display: inline-block;
  width: var(--tiny-notis-avatar-width);
  height: var(--tiny-notis-avatar-height);
  border-radius: 50%;
  z-index: 300;
}
.tiny-avatar-container {
  position: absolute;
  width: var(--tiny-notis-avatar-width);
  height: var(--tiny-notis-avatar-height);
  background-color: #ffc0cb00;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}

.tiny-avatar-container svg {
  position: absolute;
  width: var(--tiny-notis-avatar-width);
  height: var(--tiny-notis-avatar-height);
  border-radius: 50%;
  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
}

.tiny-avatar-wrapper .hair-svg {
  position: relative;
  width: var(--tiny-notis-avatar-width);
  height: var(--tiny-notis-avatar-height);
  top: 0;
  left: 0;
  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
  z-index: 2;
  pointer-events: none;
}

/*--------------TINY NOTIS----------------*/
/*--------------POST----------------------*/

.avatar-wrapper.post {
  position: relative;
  display: inline-block;
  width: var(--avatar-post-width);
  height: var(--avatar-post-height);
  border-radius: 50%;
  margin-right: 10px;
}

.avatar-wrapper.post .avatar-container {
  position: absolute;
  inset: 0;
  width: var(--avatar-post-width);
  height: var(--avatar-post-height);
  background-color: #e9ebf5;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}

.avatar-wrapper.post svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.6552) translateY(3px);
  transform-origin: 50% 50%;
}

.avatar-wrapper.post .hair-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.6552) translateY(3px);
  transform-origin: 50% 50%;
  z-index: 2;
  pointer-events: none;
}

.avatar-wrapper.post .hide-hands-overlay{
    position: absolute;
    width: var(--avatar-post-width);
    height: var(--avatar-post-height);
    transform: var(--transform-avatar);
    transform-origin: center center;
    z-index: 30;
    pointer-events: none;
}
/*
.avatar-wrapper.post {
  display: inline-block;
  width: var(--avatar-post-width);
  height: var(--avatar-post-height);
  border-radius: 50%;
  margin-right: 10px;
}
.avatar-wrapper.post .avatar-container {
  position: absolute;
  width: var(--avatar-post-width);
  height: var(--avatar-post-height);
  background-color: #e9ebf5;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}

.avatar-wrapper.post svg {
  position: absolute;
  width: var(--avatar-post-width);
  height: var(--avatar-post-height);
  border-radius: 50%;
  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
}
.avatar-wrapper.post .hair-svg {
  position: absolute;
  width: var(--avatar-post-width);
  height: var(--avatar-post-height);

  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
  z-index: 2;
  pointer-events: none;
}
*/

/*-----------THREAD-----------------------*/
.avatar-wrapper.thread {
  display: inline-block;
  width: var(--avatar-thread-width);
  height: var(--avatar-thread-height);
  border-radius: 50%;
  margin-right: 8px;
}
.avatar-wrapper.thread .avatar-container {
  position: absolute;
  width: var(--avatar-thread-width);
  height: var(--avatar-thread-height);
  background-color: #ffc0cb00;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}
.avatar-wrapper.thread svg {
  position: absolute;
  width: var(--avatar-thread-width);
  height: var(--avatar-thread-height);
  border-radius: 50%;
  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
}
.avatar-wrapper.thread .hair-svg {
  position: absolute;
  width: var(--avatar-thread-width);
  height: var(--avatar-thread-height);

  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
  z-index: 2;
  pointer-events: none;
}

.avatar-wrapper.thread .hide-hands-overlay{
    position: absolute;
    width: var(--avatar-thread-width);
    height: var(--avatar-thread-height);
    transform: var(--transform-avatar);
    transform-origin: center center;
    z-index: 30;
    pointer-events: none;
}
/*------------COMMENT AS---------------------*/
.avatar-wrapper.comment-as {
  position: absolute;
  display: inline-block;
  width: var(--avatar-comment-width);
  height: var(--avatar-comment-height);
  border-radius: 50%;
  margin-top: -28px;
}

.avatar-wrapper.comment-as .avatar-container {
    width: var(--avatar-comment-width);
    height: var(--avatar-comment-height);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    position: absolute;
    background-color: #ffc0cb00;
}

.avatar-wrapper.comment-as svg:not(.thinking-dots-mid):not(.thinking-dots-big) {
  width: var(--avatar-comment-width);
  height: var(--avatar-comment-height);
  position: absolute;
  transform: var(--transform-avatar);
  transform-origin: center center;
  z-index: 30;
}

.avatar-wrapper.comment-as .hair-svg{
    position: absolute;
    width: var(--avatar-comment-width) ;
    height: var(--avatar-comment-height);
    top: 0;
    left: 0;
    transform: scale(1.6) translateY(5%);
    transform-origin: center center;
    z-index: 2;
    pointer-events: none;
}

.avatar-wrapper.comment-as .hide-hands-overlay{
    position: absolute;
    transform: var(--transform-avatar);
    transform-origin: center center;
    z-index: 30;
    pointer-events: none;
}
/*---------COMMENTS---------------*/
.avatar-wrapper.comment {
    position: absolute;
    display: inline-block;
    width: var(--avatar-width);
    height: var(--avatar-height);
    border-radius: 50%;
}
.avatar-wrapper.comment .avatar-container {
    position: absolute;
    width: var(--avatar-width);
    height: var(--avatar-height);
    background-color: #ffc0cb00;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}
.avatar-wrapper.comment svg {
  position: absolute;
  width: var(--avatar-width);
  height: var(--avatar-height);
  border-radius: 50%;
  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
}

.avatar-wrapper.comment .hair-svg {
  position: absolute;
  width: var(--avatar-width);
  height: var(--avatar-height);
  top: 0;
  left: 0;
  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
  z-index: 2;
  pointer-events: none;
}

.avatar-wrapper.comment .hide-hands-overlay{
    position: absolute;
    width: var(--avatar-comment-width);
    height: var(--avatar-comment-height);
    transform: scale(1.5) translateY(8%) translateX(-1%);
    transform-origin: center center;
    z-index: 30;
    pointer-events: none;
}
/*--------------REPLIES--------------------*/
.replies-container .avatar-wrapper.comment-ts {
    transform: scaleX(1) !important;
    z-index: 10 !important;
    left: -18px !important;
}
.replies-container .avatar-wrapper {
    transform: scaleX(-1);
    position: absolute;
    display: inline-block;
    width: var(--avatar-reply-width);
    height: var(--avatar-reply-height);
    border-radius: 50%;
    right: 5px;
    margin-top: -1px;
}
.replies-container .avatar-wrapper .avatar-container {
    position: absolute;
    width: var(--avatar-reply-width);
    height: var(--avatar-reply-height);
    background-color: #ffc0cb00;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}
.replies-container .avatar-wrapper svg {
  position: absolute;
  width: var(--avatar-reply-width);
  height: var(--avatar-reply-height);
  border-radius: 50%;
  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
}

.replies-container .avatar-wrapper .hair-svg {
  position: absolute;
  width: var(--avatar-reply-width);
  height: var(--avatar-reply-height);
  top: 0;
  left: 0;
  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
  z-index: 2;
  pointer-events: none;
}

.replies-container .avatar-wrapper .hide-hands-overlay{
    position: absolute;
    width: var(--avatar-reply-width);
    height: var(--avatar-reply-height);
    transform: var(--transform-avatar);
    transform-origin: center center;
    z-index: 30;
    pointer-events: none;
}
/*--------------REPLIES--------------------*/
/*--------------DROPDOWN AVATAR--------------------*/


.icon-title-wrap .avatar-container {
    position: relative;
    width: var(--tiny-notis-avatar-width);
    height: var(--tiny-notis-avatar-height);
    background-color: #ffc0cb00;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    margin-left: -5px;
    margin-right: -2px;
}

.icon-title-wrap .avatar-container svg {
  position: absolute;
  width: var(--tiny-notis-avatar-width);
  height: var(--tiny-notis-avatar-height);
  border-radius: 50%;
  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
}

.avatar-wrapper.post:hover .avatar-container,
.avatar-wrapper.thread:hover .avatar-container,
.avatar-wrapper.comment-as:hover .avatar-container,
.avatar-wrapper.comment:hover .avatar-container,
.avatar-wrapper.comment-ts:hover .avatar-container {
  background: var(--avatar-hover);
  cursor: pointer;
}
.avatar-wrapper.post:active .avatar-container,
.avatar-wrapper.thread:active .avatar-container,
.avatar-wrapper.comment-as:active .avatar-container,
.avatar-wrapper.comment:active .avatar-container,
.avatar-wrapper.comment-ts:active .avatar-container {
  background: var(--flash-clr-blue);
  cursor: pointer;
}

.avatar-wrapper.post svg,
.avatar-wrapper.thread svg,
.avatar-wrapper.comment-as svg,
.avatar-wrapper.comment svg,
.avatar-wrapper.noti svg,
.avatar-wrapper.comment-ts svg {
  pointer-events: none !important;
}

.user-item .avatar-container {
  width: var(--avatar-statistics-width);
  background-color: #ffc0cb00;
  z-index: 1;
}
.user-item svg {
  position: absolute;
  width: var(--avatar-statistics-width);
  height: var(--avatar-statistics-height);
  transform-origin: center center;
}
.user-item .hair-svg {
  position: absolute;
  width: var(--avatar-statistics-width);
  height: var(--avatar-statistics-height);

  transform: scale(1.6) translateY(5%);
  transform-origin: center center;
  z-index: 2;
  pointer-events: none;
}

.user-item .hide-hands-overlay{
    position: absolute;
    width: var(--avatar-statistics-width);
    height: var(--avatar-statistics-height);
    transform: var(--transform-avatar);
    transform-origin: center center;
    z-index: 30;
    pointer-events: none;
}