#notificationPanel {
            position: fixed;
            top: 0;
            left: -300px; /* Start off-screen */
            width: 300px;
            height: 100%;
            background-color: #333; /* Dark background like the theme */
            color: #fff;
            z-index: 1050; /* Ensure it's above content, maybe below modals */
            transition: left 0.3s ease-in-out;
            overflow-y: auto;
            border-right: 1px solid #444;
            display: flex; /* Use flexbox for layout */
            flex-direction: column; /* Stack header/body vertically */
        }

        #notificationPanel.open {
            left: 50px; /* Slide in */
        }

        #notificationPanel .panel-header {
            padding: 15px;
            background-color: #222; /* Slightly darker header */
            border-bottom: 1px solid #444;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0; /* Prevent header from shrinking */
        }

         #notificationPanel .panel-header h2 {
            margin: 0;
            font-size: 1.1rem;
            color: #eee;
         }

        #notificationPanel .close-btn {
            background: none;
            border: none;
            color: #aaa;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0 5px;
        }
         #notificationPanel .close-btn:hover {
            color: #fff;
         }

        #notificationPanel .panel-body {
            padding: 15px;
            flex-grow: 1; /* Allow body to take remaining space */
            overflow-y: auto; /* Scroll if content overflows */
        }

        /* Styling for the notification list (copied from rightsidemenu) */
        #notificationPanel .notification { margin: 0; padding: 0; }
        #notificationPanel .notification li {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 10px 0;
            list-style: none;
        }
        #notificationPanel .notification li:last-child { border-bottom: none; }
        #notificationPanel .notification li i {
            width: 30px;
            text-align: center;
            margin-right: 10px;
            vertical-align: middle;
        }
         #notificationPanel .notification li strong { display: block; margin-bottom: 3px; }
         #notificationPanel .notification li p { margin: 0; line-height: normal; }
         #notificationPanel .notification li p a { color: #aaa; }
         #notificationPanel .notification li p a:hover { color: #fff; text-decoration: underline;}
         #notificationPanel .notification li small { color: #888; }

        /* Overlay Styling */
        .notification-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1040; /* Below panel, above content */
            display: none; /* Hidden by default */
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .notification-overlay.active {
            display: block;
            opacity: 1;
        }