#profileDrawer.yalla-profile-drawer {
    --profile-red: #fc5800;
    width: min(390px, calc(100vw - 20px));
    height: calc(100vh - 20px);
    margin: 10px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 65px rgba(18, 18, 20, .25);
    overflow: hidden;
    color: #202024
}

#profileDrawer .yalla-profile-head {
    position: relative;
    padding: 26px 23px 18px;
    border-bottom: 1px solid #f0f0f2
}

#profileDrawer .yalla-profile-close {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: #fff;
    color: #202024;
    font-size: 17px
}

#profileDrawer .yalla-profile-close:hover {
    background: #fff0f2;
    color: var(--profile-red)
}

#profileDrawer .yalla-profile-user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px
}

#profileDrawer .yalla-profile-avatar {
    width: 69px;
    height: 69px;
    padding: 4px;
    border: 2px solid #ffd7db;
    border-radius: 50%;
    background: #fff;
    flex: none
}

#profileDrawer .yalla-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: var(--profile-red)
}

#profileDrawer .yalla-profile-user h3 {
    margin: 0 0 7px;
    font-size: 17px;
    font-weight: 850;
    color: #202024
}

#profileDrawer .yalla-profile-user span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 20px;
    background: #f6f6f7;
    color: #777;
    font-size: 9px
}

#profileDrawer .yalla-profile-user small {
    display: block;
    margin-top: 5px;
    color: #999;
    direction: ltr;
    text-align: right;
    font-size: 10px
}

#profileDrawer .offcanvas-body {
    padding: 16px 23px 20px;
    overflow-y: auto
}

#profileDrawer .yalla-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 11px 5px;
    border: 1px solid #ececef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .045)
}

#profileDrawer .yalla-profile-stats a {
    min-width: 0;
    padding: 0 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border-left: 1px solid #ededf0;
    color: #303034;
    text-align: center
}

#profileDrawer .yalla-profile-stats a:last-child {
    border: 0
}

#profileDrawer .yalla-profile-stats i {
    color: var(--profile-red);
    font-size: 16px
}

#profileDrawer .yalla-profile-stats span {
    font-size: 9px;
    white-space: nowrap
}

#profileDrawer .yalla-profile-stats strong {
    font-size: 13px
}

#profileDrawer .yalla-profile-menu {
    margin-top: 16px;
    border: 1px solid #ececef;
    border-radius: 14px;
    overflow: hidden
}

#profileDrawer .yalla-profile-menu>a {
    min-height: 45px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeef;
    color: #29292d;
    font-size: 12px
}

#profileDrawer .yalla-profile-menu>a:last-child {
    border: 0
}

#profileDrawer .yalla-profile-menu>a:hover {
    background: #fff7f8;
    color: var(--profile-red)
}

#profileDrawer .yalla-profile-menu>a>span {
    display: flex;
    align-items: center;
    gap: 9px
}

#profileDrawer .yalla-profile-menu>a>span i {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #fff0f2;
    color: var(--profile-red)
}

#profileDrawer .yalla-profile-menu>a>i {
    font-size: 9px
}

#profileDrawer .yalla-profile-promo {
    min-height: 90px;
    margin-top: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ffe1e4;
    border-radius: 13px;
    background: linear-gradient(135deg, #fff2f3, #fff);
    overflow: hidden
}

#profileDrawer .yalla-profile-promo>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    z-index: 1
}

#profileDrawer .yalla-profile-promo strong {
    font-size: 12px
}

#profileDrawer .yalla-profile-promo span {
    font-size: 9px;
    color: #888
}

#profileDrawer .yalla-profile-promo a {
    margin-top: 6px;
    padding: 7px 18px;
    border-radius: 7px;
    background: var(--profile-red);
    color: #fff;
    font-size: 9px;
    font-weight: 700
}

#profileDrawer .yalla-profile-promo>i {
    font-size: 55px;
    color: var(--profile-red);
    transform: translateX(-2px)
}

#profileDrawer .yalla-profile-logout {
    width: 100%;
    height: 43px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--profile-red);
    border-radius: 10px;
    background: #fff;
    color: var(--profile-red);
    font-size: 12px;
    font-weight: 800
}

#profileDrawer .yalla-profile-logout:hover {
    background: var(--profile-red);
    color: #fff
}

#profileDrawer .yalla-profile-footer {
    padding: 14px 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    background: linear-gradient(180deg, #fff7f8, #fff0f2);
    color: #777
}

#profileDrawer .yalla-profile-footer>span {
    font-size: 9px
}

#profileDrawer .yalla-profile-footer>div {
    display: flex;
    gap: 13px
}

#profileDrawer .yalla-profile-footer a {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #333;
    font-size: 11px
}

#profileDrawer .yalla-profile-footer small {
    font-size: 8px
}

@media(max-width:480px) {
    #profileDrawer.yalla-profile-drawer {
        width: calc(100vw - 12px);
        height: calc(100vh - 12px);
        margin: 6px
    }

    #profileDrawer .offcanvas-body {
        padding-inline: 16px
    }
}

#profileDrawer .yalla-skeleton {
    display: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%;
    animation: yalla-skeleton-shimmer 1.4s ease infinite
}

#profileDrawer.is-loading .yalla-skeleton {
    display: block
}

#profileDrawer.is-loading .yalla-skeleton-wrap>*:not(.yalla-skeleton):not(.yalla-skeleton-lines) {
    visibility: hidden
}

#profileDrawer .yalla-skeleton-avatar {
    position: absolute;
    width: 69px;
    height: 69px;
    border-radius: 50%;
    top: 26px;
    right: 23px
}

#profileDrawer .yalla-skeleton-lines {
    position: absolute;
    top: 32px;
    right: 106px;
    left: 23px;
    display: flex;
    flex-direction: column;
    gap: 9px
}

#profileDrawer .yalla-skeleton-line {
    height: 13px
}

#profileDrawer.is-loading .yalla-profile-user {
    position: relative
}

#profileDrawer .yalla-profile-stats.yalla-skeleton-wrap {
    position: relative
}

#profileDrawer .yalla-skeleton-stat {
    display: none;
    height: 44px
}

#profileDrawer.is-loading .yalla-skeleton-stat {
    display: block
}

#profileDrawer.is-loading .yalla-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 11px
}

#profileDrawer.is-loading .yalla-profile-stats a {
    display: none
}

@keyframes yalla-skeleton-shimmer {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: 0 0
    }
}