main #friend-list{display:grid;gap:1rem}main #friend-list .friend-container{padding:1rem;border-radius:1.25rem;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;background:linear-gradient(to bottom right, var(--bubble-background-1), var(--bubble-background-2));background-clip:padding-box;border:solid 1.5px rgba(0,0,0,0);position:relative}main #friend-list .friend-container::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:-1.5px;border-radius:inherit;background:linear-gradient(to bottom right, var(--bubble-background-2), var(--bubble-background-1))}main #friend-list .friend-container .pin-icon{width:1.5rem;aspect-ratio:1;background-color:var(--text-lite);-webkit-mask-box-image:url("../../svg/pin.svg");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;top:50%;transform:translateY(-50%);right:1.5rem}main #friend-list .friend-container .friend-icon{width:4rem;aspect-ratio:1;background-color:var(--text-lite);-webkit-mask-box-image:url("../../svg/person.svg");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}main #friend-list .friend-container .friend-name-container{font-size:1.125rem}main #friend-list .friend-container .last-seen-container{margin-top:.5rem;font-size:.85rem;font-weight:350;color:var(--text-lite)}main #friend-list .friend-container .last-seen-container .due-today{color:var(--color-attention)}main #friend-list .friend-container .last-seen-container .time-left{color:var(--text-inactive)}main #friend-list .friend-container .last-seen-container .overdue{color:var(--color-invalid)}