* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .notification-updates-container {
            max-width: 384px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            margin: 0;
            line-height: 1.5;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            border: 1px solid #e5e7eb;
            overflow: hidden;
            width: 100%;
        }

        .updates-div-header {
            background: linear-gradient(to right, #dc2626, #ea580c);
            color: white;
            padding: 8px 12px;
        }

        .updates-div-header h3 {
            font-weight: bold;
            font-size: 14px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        .live-badge {
            margin-left: 25px;
            font-size: 12px;
            background-color: rgba(23 90 233);
            padding: 4px 8px;
            border-radius: 9999px;
            
        }
        .live-badge a{
        text-decoration: none;
        color: white;
        }
        .scrolling-container {
            height: 355px !important;
            /*background: linear-gradient(to bottom, #dbeafe, white);*/
            background-color:white;
            overflow: hidden;
            position: relative;
        }

        .scrolling-content {
            animation: scroll-up 30s linear infinite;
        }

        .scrolling-content:hover {
            animation-play-state: paused;
        }

        @keyframes scroll-up {
            0% {
                transform: translateY(0%);
            }
            100% {
                transform: translateY(-100%);
            }
        }

        .update-item {
            min-height: 80px;
            padding: 12px;
            border-bottom: 1px solid #f3f4f6;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .update-item:hover {
            background-color: #dbeafe;
        }

        .update-content {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .status-dot {
            flex-shrink: 0;
            margin-top: 4px;
        }

        .dot {
            display: inline-block;
            width: 21px;
            height: 22px;
            border-radius: 50%;
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        .dot-red { background-color: #ef4444; }
        .dot-green { background-color: #22c55e; }
        .dot-yellow { background-color: #eab308; }
        .dot-blue { background-color: #3b82f6; }
        .dot-purple { background-color: #a855f7; }
        .dot-indigo { background-color: #6366f1; }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }

        .update-text {
            flex: 1;
            min-width: 0;
        }

        .update-title {
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .title-red { color: #dc2626; }
        .title-green { color: #16a34a; }
        .title-yellow { color: #ca8a04; }
        .title-blue { color: #2563eb; }
        .title-purple { color: #9333ea; }
        .title-indigo { color: #4f46e5; }

        .update-description {
            font-size: 12px;
            color: #1f2937;
            line-height: 1.6;
        }

        .update-time {
            font-size: 12px;
            color: #6b7280;
            margin-top: 4px;
        }

        .updates-div-footer {
            background-color: #f9fafb;
            padding: 8px 12px;
            text-align: center;
        }

        .updates-div-footer p {
            font-size: 12px;
            color: #6b7280;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }

        .footer-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #22c55e;
            border-radius: 50%;
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* Responsive Design */
        @media (min-width: 641px) {
            .notification-updates-container {
                max-width: 448px;
            }

            .updates-div-header {
                padding: 12px 16px;
            }

            .updates-div-header h3 {
                font-size: 18px;
            }

            .updates-div-header span {
                font-size: 16px;
            }

            .scrolling-container {
                height: 224px;
            }

            .update-item {
                padding: 16px;
            }

            .update-content {
                gap: 12px;
            }

            .dot {
                width: 21px;
                height: 22px;
            }

            .update-title {
                font-size: 14px;
            }

            .update-description {
                font-size: 14px;
            }

            .update-time {
                font-size: 12px;
                margin-top: 8px;
            }

            .updates-div-footer {
                padding: 12px 16px;
            }
        }

        @media (min-width: 1025px) {
            .notification-updates-container {
                max-width: 512px;
            }

            .scrolling-container {
                height: 256px;
            }
        }

        @media (max-width: 640px) {
            .scrolling-container {
                height: 224px !important;
            }

            .update-time {
                margin-top: 4px;
            }
            .live-badge {
            margin: 5px 0px 0px 0px;
            }
}