/* Start Avatar Styles */
.avatar {
    position: relative;
    display: inline-flex;
    height: 2.625rem;
    width: 2.625rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.avatar a.badge:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.avatar img {
    height: 100%;
    width: 100%;
    border-radius: 0.5rem
}
.avatar .avatar-rounded {
    border-radius: 9999px !important
}
.avatar .avatar-rounded img {
    border-radius: 9999px !important
}
.avatar.avatar-radius-0 {
    border-radius: 0
}
.avatar.avatar-radius-0 img {
    border-radius: 0
}
.avatar .avatar-badge {
    position: absolute !important;
    top: -4% !important;
    inset-inline-end: -0.375rem !important;
    display: flex !important;
    height: 1.4rem !important;
    width: 1.4rem !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    border-width: 2px !important;
    border-style: solid !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
    font-size: 0.625rem !important
}
.avatar.online, .avatar.offline {
    position: relative
}
.avatar.online::before, .avatar.offline::before {
    position: absolute;
    inset-inline-end: 0px;
    bottom: 0px;
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 9999px;
    border-width: 2px;
    border-style: solid;
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity))
}
:is(.dark .avatar.online)::before,:is(.dark  .avatar.offline)::before {
    content: var(--tw-content);
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity))
}
.avatar.online:before {
    background-color: rgb(var(--success))
}
.avatar.offline:before {
    --tw-bg-opacity: 1;
    background-color: rgb(148 158 183 / var(--tw-bg-opacity))
}
.avatar.avatar-xs {
    height: 1.25rem;
    width: 1.25rem;
    font-size: 0.65rem;
    line-height: 1.25rem
}
.avatar.avatar-xs .avatar-badge {
    top: -25% !important;
    inset-inline-end: -0.5rem !important;
    height: 1rem !important;
    width: 1rem !important;
    padding: 0.25rem !important;
    font-size: 0.5rem !important;
    line-height: 1rem !important
}
.avatar.avatar-xs.online::before, .avatar.avatar-xs.offline::before {
    height: 0.5rem;
    content: var(--tw-content);
    width: 0.5rem
}
.avatar.avatar-sm {
    height: 1.75rem;
    width: 1.75rem;
    font-size: 0.65rem;
    line-height: 1.75rem
}
.avatar.avatar-sm .avatar-badge {
    top: -38% !important;
    inset-inline-end: -0.5rem !important;
    height: 1.1rem !important;
    width: 1.1rem !important;
    padding: 0.3rem !important;
    font-size: 0.5rem !important;
    line-height: 1.1rem !important
}
.avatar.avatar-sm.online::before, .avatar.avatar-sm.offline::before {
    height: 0.5rem;
    content: var(--tw-content);
    width: 0.5rem
}
.avatar.avatar-md {
    height: 2.5rem;
    width: 2.5rem;
    font-size: 0.8rem;
    line-height: 2.5rem
}
.avatar.avatar-md .avatar-badge {
    top: -6% !important;
    inset-inline-end: -13% !important;
    height: 1.2rem !important;
    width: 1.2rem !important;
    padding: 0.4rem !important;
    font-size: 0.65rem !important;
    line-height: 1.2rem !important
}
.avatar.avatar-md.online::before, .avatar.avatar-md.offline::before {
    height: 0.75rem;
    content: var(--tw-content);
    width: 0.75rem
}
.avatar.avatar-md svg {
    height: 1.5rem;
    width: 1.5rem
}
.avatar.avatar-lg {
    height: 3rem;
    width: 3rem;
    font-size: 1rem;
    line-height: 3rem
}
.avatar.avatar-lg .avatar-badge {
    top: -15%;
    inset-inline-end: -0.25%
}
.avatar.avatar-lg.online::before, .avatar.avatar-lg.offline::before {
    height: 0.8rem;
    content: var(--tw-content);
    width: 0.8rem
}
.avatar.avatar-lg svg {
    height: 1.8rem;
    width: 1.8rem
}
.avatar.avatar-xl {
    height: 4rem;
    width: 4rem;
    font-size: 1.25rem;
    line-height: 4rem
}
.avatar.avatar-xl .avatar-badge {
    top: -8%;
    inset-inline-end: -0.2%
}
.avatar.avatar-xl.online::before, .avatar.avatar-xl.offline::before {
    height: 0.95rem;
    content: var(--tw-content);
    width: 0.95rem
}
.avatar.avatar-xxl {
    height: 5rem;
    width: 5rem;
    font-size: 1.5rem;
    line-height: 5rem
}
.avatar.avatar-xxl .avatar-badge {
    top: -4%;
    inset-inline-end: -0%
}
.avatar.avatar-xxl.online, .avatar.avatar-xxl.offline {
    bottom: 0.25rem
}
.avatar.avatar-xxl.online::before, .avatar.avatar-xxl.offline::before {
    height: 1.05rem;
    content: var(--tw-content);
    width: 1.05rem
}

.avatar-rounded {
    border-radius: 9999px !important
}
.avatar-rounded img {
    border-radius: 9999px !important
}