.badge-counter {
    position: absolute;
    transform: scale(0.7);
    transform-origin: top right;
    right: .25rem;
    margin-top: -0.25rem;
}

.notification-dropdown {
    width: 400px; /* Make the dropdown larger */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    padding: 0; /* Remove default padding */
    overflow: hidden; /* Prevent overflow */
}

.notification-header {
    font-weight: bold;
    text-align: center;
    padding: 10px;
    background-color: #6111ff;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0; /* Remove margin */
}

.notification-body {
    max-height: 400px; /* Set a maximum height for the scrollable area */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.notification-card {
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.notification-icon {
    flex-shrink: 0;
}

.notification-content {
    flex-grow: 1;
    padding-left: 10px;
    overflow-wrap: break-word; /* Ensure long words are broken to wrap */
    word-wrap: break-word; /* Ensure long words are broken to wrap */
    white-space: normal; /* Ensure text wraps within the container */
    max-width: 250px; /* Ensure the content stays within the container */
}

.notification-time {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 5px;
}

.notification-message {
    font-size: 0.95rem;
}

.notification-read {
    flex-shrink: 0;
}

.btn-read {
    background-color: transparent;
    border: none;
    color: #28a745;
    cursor: pointer;
}

.btn-read:hover {
    color: #218838;
}

.dropdown-footer-custom {
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: #f8f9fa;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.dropdown-menu-custom {
    padding: 0; /* Remove default padding */
}

.dropdown-item:active{
    background-color: #f8f9fa;
    color: black;
}