/* ==========================================================
   DBVYRO ARENA FOLLOWING AVATAR + PREMIUM RING V1
   Only affects Following sidebar.
   ========================================================== */


/* ROW */

.arena-sidebar-v150
.follow-live-row{

  grid-template-columns:
    50px
    minmax(0,1fr)
    auto !important;

  align-items:center!important;

  gap:10px!important;

  min-height:62px;

  padding:
    8px
    9px!important;

  overflow:visible!important;
}


/* AVATAR WRAPPER */

.arena-sidebar-v150
.follow-live-avatar{

  position:relative!important;

  z-index:2;

  display:grid!important;

  place-items:center!important;

  flex:
    0 0
    42px!important;

  width:
    42px!important;

  height:
    42px!important;

  min-width:
    42px!important;

  min-height:
    42px!important;

  max-width:
    42px!important;

  max-height:
    42px!important;

  margin:
    0!important;

  padding:
    0!important;

  border-radius:
    50%!important;

  overflow:
    visible!important;

  isolation:isolate;

  background:
    linear-gradient(
      145deg,
      #367fff,
      #7553ff 55%,
      #e62db8
    );
}


/*
 * Actual image is INSIDE the wrapper.
 * The Premium ring stays outside without
 * changing the photo dimensions.
 */

.arena-sidebar-v150
.follow-live-avatar-img{

  position:relative;

  z-index:2;

  display:block!important;

  width:
    42px!important;

  height:
    42px!important;

  min-width:
    42px!important;

  min-height:
    42px!important;

  max-width:
    42px!important;

  max-height:
    42px!important;

  margin:
    0!important;

  padding:
    0!important;

  border:
    0!important;

  border-radius:
    50%!important;

  object-fit:
    cover!important;

  object-position:
    center!important;

  overflow:
    hidden!important;
}


/* FALLBACK INITIALS */

.arena-sidebar-v150
.follow-live-avatar-fallback{

  position:relative;

  z-index:2;

  display:grid;

  place-items:center;

  width:42px;
  height:42px;

  border-radius:50%;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #367fff,
      #7553ff 55%,
      #e62db8
    );

  color:#fff;

  font-size:15px;

  font-weight:950;
}


/* COPY */

.arena-sidebar-v150
.follow-live-copy-v2{

  min-width:0;

  display:grid;

  align-content:center;

  gap:1px;
}


.arena-sidebar-v150
.follow-live-copy-v2 b{

  min-width:0;

  overflow:hidden;

  color:#fff;

  font-size:14px;

  line-height:1.25;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.arena-sidebar-v150
.follow-live-copy-v2 small{

  overflow:hidden;

  color:#828da1;

  font-size:10px;

  line-height:1.3;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.arena-sidebar-v150
.follow-live-copy-v2 em{

  margin-top:2px;

  overflow:hidden;

  color:#8d98aa;

  font-size:9px;

  font-style:normal;

  white-space:nowrap;

  text-overflow:ellipsis;
}


/* LIVE PILL */

.arena-sidebar-v150
.follow-live-row>i{

  align-self:center;

  font-style:normal;

  font-size:8px!important;

  line-height:1;

  font-weight:950;

  letter-spacing:.07em;

  padding:
    5px
    6px!important;

  border-radius:7px;
}


/*
 * Rings can extend outside 42px,
 * but the photo itself NEVER grows.
 */

.arena-sidebar-v150
.follow-live-avatar[
  class*="db-avatar-frame-"
]{

  width:
    42px!important;

  height:
    42px!important;

  min-width:
    42px!important;

  min-height:
    42px!important;

  max-width:
    42px!important;

  max-height:
    42px!important;

  overflow:
    visible!important;
}


/* Ensure ring stays above row background */

.arena-sidebar-v150
.follow-live-avatar[
  class*="db-avatar-frame-"
]::before{

  pointer-events:none!important;
}


.arena-sidebar-v150
.follow-live-avatar[
  class*="db-avatar-frame-"
]::after{

  pointer-events:none!important;
}


/* Smaller sidebar at narrow desktop */

@media(
  min-width:781px
)
and
(
  max-width:1050px
){

  .arena-sidebar-v150
  .follow-live-row{

    grid-template-columns:
      46px
      minmax(0,1fr)
      auto!important;

    gap:7px!important;
  }

}


/* Mobile horizontal list */

@media(max-width:780px){

  .arena-sidebar-v150
  .follow-live-row{

    min-width:
      200px!important;

    grid-template-columns:
      48px
      minmax(0,1fr)
      auto!important;
  }

}