:root {
    --primary-bg-hover: #82c035;
}
#notificationBellDropdown .list-group-item.list-group-item-action:hover .mb-1 {
    color: var(--primary-bg-hover) !important;
    transition: color .15s ease-in-out;
}

#notificationBell {
    position: relative; 
}

    #notificationBell::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0; 
        height: 3px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .18s ease-in-out;
    }


    #notificationBell[aria-expanded="true"]::after,
    #notificationBellDropdown .show > #notificationBell::after {
        transform: scaleX(1);
    }

#notificationBellDropdown [data-role="kebab"] {
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: var(--primary-bg-hover); 
    --bs-btn-active-border-color: transparent;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-color: var(--primary-bg-hover); 
    --bs-btn-active-color: var(--primary-bg-hover);
    color: var(--bs-body-color);
    box-shadow: none !important;
    border-width: 1px;
}
    #notificationBellDropdown [data-role="kebab"]:hover {
        color: var(--primary-bg-hover);
        border-color: var(--primary-bg-hover); 
        background-color: transparent !important;
    }
    #notificationBellDropdown [data-role="kebab"]:active,
    #notificationBellDropdown .show > [data-role="kebab"] {
        color: var(--primary-bg-hover) !important;
        border-color: var(--primary-bg-hover) !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    #notificationBellDropdown [data-role="kebab"].dropdown-toggle::after {
        display: none;
    }


.dropdown-menu .dropdown-menu {
    margin-top: 3px;
    margin-left: -5px;
}


.list-group-item {
    border: none;
    border-bottom: 1px solid #eee;
    padding: 12px 15px;
}

    .list-group-item:last-child {
        border-bottom: none;
    }

    .list-group-item:hover {
        background-color: #f8f9fa;
    }

.teleport-switch {
    margin-bottom: 0;
}

.shimmer-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f0f0f0;
}

.shimmer-line {
    height: 12px;
    background: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 8px;
}

    .shimmer-line.short {
        width: 60%;
        height: 10px;
    }

.loading-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f0f0f0;
    margin: 0 2px;
}

    .loading-dot:nth-child(1) {
        animation: pulse 1.4s ease-in-out infinite;
    }

    .loading-dot:nth-child(2) {
        animation: pulse 1.4s ease-in-out 0.2s infinite;
    }

    .loading-dot:nth-child(3) {
        animation: pulse 1.4s ease-in-out 0.4s infinite;
    }

#notificationCount {
    position: absolute;
    top: 20px;
    left: 25px;
    font-size: 0.66rem;
    transform: translate(-25%, -25%);
    padding: 0.3rem 0.4rem;
}

.header-icon-badge {
    inset-inline-end: unset !important;
}

.show-unread-msg {
    font-size: 0.8rem;
}

.notification-dropdown {
    width: 450px;
}

#notificationList {
    max-height: min(550px, calc(100vh - 150px));
    overflow-y: auto;
    overflow-x: hidden;
}


#notificationBell .svg-notification-bell {
    width: 35px;
    height: 35px;
    fill: currentColor;
}
 .notification-unread {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}