/* Vibboza - barre amis et console amis premium
   CSS uniquement: aucune action amis/messenger n'est modifiee. */

.friend-bar {
    height: 44px !important;
    gap: 5px !important;
    padding: 0 5px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 15px !important;
    background-color: rgba(9, 16, 27, .74) !important;
    background-image:
        radial-gradient(circle at 18% 0%, rgba(255, 210, 93, .12), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

.friend-bar .friend-bar-button {
    width: 32px !important;
    min-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background-color: rgba(5, 10, 18, .72) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10) !important;
    opacity: 1 !important;
}

.friend-bar .friend-bar-button.disabled {
    opacity: .48 !important;
    filter: grayscale(.15) !important;
}

.friend-bar .friend-bar-button:not(.disabled):hover {
    border-color: rgba(255, 210, 93, .45) !important;
    background-color: rgba(255, 210, 93, .11) !important;
}

.friend-bar .friend-bar-item {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    color: #fff8dc !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .42) !important;
    background-color: rgba(18, 30, 48, .88) !important;
    background-image: linear-gradient(180deg, rgba(71, 184, 255, .18), rgba(255, 255, 255, .03)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .18) !important;
    transition: transform .12s ease, border-color .12s ease, background-color .12s ease !important;
}

.friend-bar .friend-bar-item:hover,
.friend-bar .friend-bar-item.friend-bar-item-active {
    transform: translateY(-1px) !important;
    border-color: rgba(255, 210, 93, .58) !important;
    background-color: rgba(28, 41, 63, .96) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .24), 0 0 0 2px rgba(255, 210, 93, .10), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

.friend-bar .friend-bar-search {
    width: 142px !important;
    padding-left: 39px !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

.friend-bar .friend-bar-item-head {
    left: 11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .38)) !important;
}

.nitro-friends,
.nitro-friends-messenger,
.nitro-friends-room-invite,
.nitro-friends-remove-confirmation {
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    overflow: hidden !important;
    color: #fff6dc !important;
    background-color: #101723 !important;
    background-image:
        radial-gradient(circle at 12% 0%, rgba(255, 210, 93, .16), transparent 34%),
        radial-gradient(circle at 92% 14%, rgba(71, 184, 255, .14), transparent 36%),
        linear-gradient(145deg, #18243a 0%, #0e1420 62%, #17150e 100%) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.nitro-friends .nitro-card-header,
.nitro-friends .card-header,
.nitro-friends-messenger .nitro-card-header,
.nitro-friends-messenger .card-header,
.nitro-friends-room-invite .nitro-card-header,
.nitro-friends-room-invite .card-header,
.nitro-friends-remove-confirmation .nitro-card-header,
.nitro-friends-remove-confirmation .card-header {
    min-height: 43px !important;
    color: #fff8dc !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    background-color: rgba(7, 12, 20, .74) !important;
    background-image: linear-gradient(90deg, rgba(255, 210, 93, .22), rgba(71, 184, 255, .10), transparent) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .46) !important;
}

.nitro-friends .nitro-card-content,
.nitro-friends .card-body,
.nitro-friends-messenger .nitro-card-content,
.nitro-friends-messenger .card-body {
    padding: 11px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 42%),
        radial-gradient(circle at 50% 100%, rgba(255, 210, 93, .055), transparent 40%) !important;
}

.nitro-friends .list-group,
.nitro-friends .accordion,
.nitro-friends [class*="list"],
.nitro-friends-messenger [class*="thread"] {
    border-radius: 14px !important;
}

.nitro-friends .list-group-item,
.nitro-friends .accordion-item,
.nitro-friends [class*="friend-list"] [class*="item"],
.nitro-friends-messenger [class*="thread"] {
    border-color: rgba(255, 255, 255, .10) !important;
    color: #dce6f4 !important;
    background-color: rgba(9, 16, 27, .58) !important;
}

.nitro-friends input[type="text"],
.nitro-friends input[type="search"],
.nitro-friends .form-control,
.nitro-friends-messenger input[type="text"],
.nitro-friends-messenger input[type="search"],
.nitro-friends-messenger .form-control {
    min-height: 31px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    color: #fff7df !important;
    font-weight: 700 !important;
    background-color: rgba(5, 10, 18, .70) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.nitro-friends .btn,
.nitro-friends button,
.nitro-friends-messenger .btn,
.nitro-friends-messenger button {
    border-radius: 11px !important;
    font-weight: 850 !important;
}

.nitro-friends-spritesheet {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .32));
}
/* Correction alignement barre amis: la tete reste dans le bouton, pas au-dessus. */
.friend-bar .friend-bar-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.friend-bar .friend-bar-search {
    padding-left: 43px !important;
}

.friend-bar .friend-bar-item-head {
    left: 10px !important;
    top: 3px !important;
    width: 27px !important;
    height: 28px !important;
    transform: none !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .38)) !important;
}

.friend-bar .friend-bar-item-head.avatar {
    top: 1px !important;
}