.notification-icon{position:relative;cursor:pointer;display:inline-block;vertical-align:middle;margin-right:15px}.notification-icon .badge{position:absolute;top:-2px;right:-10px;padding:2px 5px;border-radius:50%;background:#f00;color:#fff}.notification-dropdown{display:none;position:absolute;top:50px;right:15px;width:350px;background-color:#fff;box-shadow:0 4px 8px rgba(0,0,0,.15);border:1px solid #ddd;border-radius:4px;z-index:1000}.notification-dropdown.open{display:block}.notification-summary{padding:15px;cursor:pointer;font-weight:bold;color:#333}.notification-details h4{padding:10px 15px;margin:0;font-size:18px;border-bottom:1px solid #eee}.notification-card{background-color:#fff;border:1px solid #ddd;border-radius:4px;padding:15px;margin-bottom:15px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.notification-card .card-header{font-weight:bold;font-size:16px;margin-bottom:10px;color:#333}.notification-card .card-body{font-size:14px;color:#666}.notification-list{max-height:300px;overflow-y:auto;padding:0 15px}