.ts-user-area {
    display: inline-flex;
    position: relative;
    width: 100%
}

.ts-user-area > ul {
    width: 100%;
    flex-wrap: nowrap
}

.ts-user-area > ul > li:first-child {
    margin-left: 0 !important
}

.ts-user-area > ul > li > a {
    display: flex;
    align-items: center;
    transition: all .3s ease;
    position: relative;
    color: var(--ts-shade-2)
}

.ts-user-area > ul > li > a:hover .ts-comp-icon {
    background: #f9f9f9
}

.ts-user-area > ul > li > a .ts-comp-icon {
    background: transparent;
    border-radius: 25px;
    align-items: center;
    transition: all .3s ease;
    justify-content: center;
    position: relative
}

.ts-user-area > ul > li > a .ts-comp-icon > i {
    font-size: 28px;
    transition: all .3s ease
}

.ts-user-area > ul > li > a .ts-comp-icon > img, .ts-user-area > ul > li > a .ts-comp-icon > svg {
    -o-object-fit: contain;
    object-fit: contain;
    transition: all .3s ease
}
.ts-user-area > ul > li > a .ts-comp-icon > img {
    width: 26px;
    height: 26px;
}
.ts-user-area > ul > li > a .ts-comp-icon > svg {
    width: 26px;
    height: 26px;
}

.ts-user-area > ul > li > a .ts_comp_label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: var(--e-global-typography-text-font-size);
    margin: 0;
    transition: all .3s ease;
    color: #0c162c
}

.ts-user-area > ul > li.ts-user-area-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover
}

.ts-user-area > ul > li.ts-user-area-avatar img, .ts-user-area > ul > li.ts-user-area-avatar svg {
    width: 16px;
    height: 16px;
    -o-object-fit: contain;
    object-fit: contain
}

span.unread-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    background: var(--ts-accent-1);
    left: 95%;
    transform: translateX(-50%);
    bottom: 0;
}

.user-bar-tabs span.unread-indicator {
    top: -7px
}

.ts-tab-content {
    padding: 15px
}

@media (max-width: 767px) {
    .ts-list-container {
        flex-grow: 1
    }
}

@media (min-width: 768px) {
    .ts-user-area > ul > li > a .ts-comp-icon > img {
        width: 22px;
        height: 22px;
    }
}