/* Sempli animal avatars */
.sempli-animal-sprite{
  display:block;
  width:72px;
  height:72px;
  background-image:url('/avatars/animal-sprite.webp');
  background-repeat:no-repeat;
  background-size:521.28px 390.96px;
  border-radius:18px;
}
.avatar-fox{background-position:-5.4px -98.64px}
.avatar-panda{background-position:-79.2px -98.64px}
.avatar-tiger{background-position:-151.92px -98.64px}
.avatar-owl{background-position:-225px -99px}
.avatar-frog{background-position:-297.36px -98.64px}
.avatar-penguin{background-position:-370.08px -98.64px}
.avatar-koala{background-position:-442.8px -98.64px}
.avatar-cat{background-position:-4.68px -203.4px}
.avatar-dog{background-position:-77.4px -203.04px}
.avatar-bear{background-position:-151.56px -203.04px}
.avatar-rabbit{background-position:-225px -203.04px}
.avatar-raccoon{background-position:-297.72px -203.4px}
.avatar-lion{background-position:-370.44px -203.4px}
.avatar-sloth{background-position:-443.16px -203.4px}

#profileAvatar.animal-avatar{padding:0;overflow:hidden;background:#f4f3ff;border-radius:11px}
#profileAvatar.animal-avatar .sempli-animal-sprite{transform:scale(.5);transform-origin:0 0}

.avatar-settings-card{overflow:hidden}
.avatar-settings-head{align-items:center;margin-bottom:18px}
.avatar-settings-head>div:first-child p{font-size:14px;line-height:1.55;color:var(--muted);margin:7px 0 0}
.avatar-current-wrap{display:flex;align-items:center;gap:10px;background:#faf9ff;border:1px solid #e8e4ff;border-radius:15px;padding:9px 12px;min-width:190px}
.avatar-current-preview{width:48px;height:48px;border-radius:14px;overflow:hidden;background:#f4f3ff;flex:0 0 auto}
.avatar-current-preview .sempli-animal-sprite{transform:scale(.6666667);transform-origin:0 0}
.avatar-current-wrap>div:last-child{display:grid;gap:2px}
.avatar-current-wrap strong{font-size:14px}
.avatar-current-wrap small{font-size:11px;color:var(--muted)}

.avatar-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.avatar-option{position:relative;border:1px solid #e4e7ec;background:#fff;border-radius:16px;padding:11px 8px 9px;display:grid;justify-items:center;gap:7px;cursor:pointer;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease;min-width:0}
.avatar-option:hover{transform:translateY(-2px);border-color:#c9c2ff;background:#fbfaff;box-shadow:0 8px 22px rgba(65,53,154,.08)}
.avatar-option>span:not(.sempli-animal-sprite){font-size:12px;font-weight:800;color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.avatar-option i{position:absolute;right:7px;top:7px;width:20px;height:20px;border-radius:999px;background:#6d5dfc;color:#fff;font-style:normal;font-size:11px;font-weight:900;display:grid;place-items:center;opacity:0;transform:scale(.7);transition:.14s ease}
.avatar-option.selected{border-color:#6d5dfc;background:#f8f7ff;box-shadow:0 0 0 2px rgba(109,93,252,.12)}
.avatar-option.selected i{opacity:1;transform:scale(1)}
.avatar-option:disabled{cursor:wait;opacity:.7}

@media(max-width:1100px){.avatar-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .avatar-settings-head{align-items:flex-start;flex-direction:column}
  .avatar-current-wrap{width:100%;min-width:0}
  .avatar-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:420px){.avatar-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#view-settings .avatar-settings-card{align-self:start}
#view-settings .avatar-settings-card .settings-card-head{gap:14px}
#view-settings .avatar-settings-card .sempli-animal-sprite{width:64px;height:64px;background-size:463.36px 347.52px}
#view-settings .avatar-settings-card .avatar-fox{background-position:-4.8px -87.68px}
#view-settings .avatar-settings-card .avatar-panda{background-position:-70.4px -87.68px}
#view-settings .avatar-settings-card .avatar-tiger{background-position:-135.04px -87.68px}
#view-settings .avatar-settings-card .avatar-owl{background-position:-200px -88px}
#view-settings .avatar-settings-card .avatar-frog{background-position:-264.32px -87.68px}
#view-settings .avatar-settings-card .avatar-penguin{background-position:-328.96px -87.68px}
#view-settings .avatar-settings-card .avatar-koala{background-position:-393.6px -87.68px}
#view-settings .avatar-settings-card .avatar-cat{background-position:-4.16px -180.8px}
#view-settings .avatar-settings-card .avatar-dog{background-position:-68.8px -180.48px}
#view-settings .avatar-settings-card .avatar-bear{background-position:-134.72px -180.48px}
#view-settings .avatar-settings-card .avatar-rabbit{background-position:-200px -180.48px}
#view-settings .avatar-settings-card .avatar-raccoon{background-position:-264.64px -180.8px}
#view-settings .avatar-settings-card .avatar-lion{background-position:-329.28px -180.8px}
#view-settings .avatar-settings-card .avatar-sloth{background-position:-393.92px -180.8px}
#view-settings .avatar-settings-card .avatar-option{padding:10px 7px 9px}
@media(max-width:820px){
  #view-settings .avatar-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:460px){
  #view-settings .avatar-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}