/* FACELOV PROFILE HOVERCARD V1.0.0 */

.fl-profile-hovercard{
  position:fixed;
  z-index:2147482400;
  width:min(360px,calc(100vw - 24px));
  padding:16px;
  border:1px solid #e4e7ee;
  border-radius:14px;
  background:#fff;
  box-shadow:
    0 12px 34px rgba(25,31,45,.18),
    0 2px 8px rgba(25,31,45,.08);
  color:#20283a;
  font-family:inherit;
  box-sizing:border-box;
}

.fl-profile-hovercard[hidden]{
  display:none!important;
}

.fl-profile-hovercard *,
.fl-profile-hovercard *::before,
.fl-profile-hovercard *::after{
  box-sizing:border-box;
}

.fl-profile-hovercard__top{
  display:flex;
  align-items:center;
  gap:13px;
}

.fl-profile-hovercard__avatar{
  position:relative;
  flex:0 0 72px;
  width:72px;
  height:72px;
  overflow:visible;
  border-radius:50%;
  background:linear-gradient(135deg,#8a3bf0,#dd2dbf);
  color:#fff;
  text-decoration:none;
  box-shadow:0 0 0 3px #fff,0 0 0 4px #e5e7ee;
}

.fl-profile-hovercard__avatar>img,
.fl-profile-hovercard__avatar>span{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border-radius:50%;
}

.fl-profile-hovercard__avatar>img{
  object-fit:cover;
}

.fl-profile-hovercard__avatar>span{
  font-size:28px;
  font-weight:800;
}

.fl-profile-hovercard__online{
  position:absolute;
  right:1px;
  bottom:4px;
  width:15px;
  height:15px;
  border:3px solid #fff;
  border-radius:50%;
  background:#20b15a;
}

.fl-profile-hovercard__identity{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.fl-profile-hovercard__name{
  max-width:100%;
  overflow:hidden;
  color:#1c2434;
  font-size:19px;
  font-weight:800;
  line-height:1.16;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.fl-profile-hovercard__name:hover{
  text-decoration:underline;
}

.fl-profile-hovercard__identity small{
  overflow:hidden;
  color:#7b8495;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.fl-profile-hovercard__facts{
  display:grid;
  gap:8px;
  margin:15px 0;
}

.fl-profile-hovercard__fact{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-width:0;
  color:#3e4859;
  font-size:12px;
  line-height:1.35;
}

.fl-profile-hovercard__fact svg{
  width:19px;
  height:19px;
  color:#7b8493;
}

.fl-profile-hovercard__fact span{
  overflow:hidden;
  text-overflow:ellipsis;
}

.fl-profile-hovercard__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.fl-profile-hovercard__btn{
  min-width:0;
  min-height:38px;
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:#e9ebef;
  color:#242b38;
  font:inherit;
  font-size:12px;
  font-weight:750;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}

.fl-profile-hovercard__btn svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.fl-profile-hovercard__btn--primary{
  background:linear-gradient(135deg,#7938f2,#c92dd0);
  color:#fff;
}

.fl-profile-hovercard__btn--friend{
  background:#eceef2;
  color:#202733;
}

.fl-profile-hovercard__btn:hover:not(:disabled){
  filter:brightness(.975);
}

.fl-profile-hovercard__btn:disabled{
  opacity:.62;
  cursor:default;
}

@media(max-width:700px){
  .fl-profile-hovercard{
    display:none!important;
  }
}