#notificationPop{
    display: none;
    position: fixed;
    margin: 0;
    padding: 0;
    width: 300px;
    max-height: 440px;
    background: linear-gradient(135deg, #f6f7fa, #e6e9ed);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
    overflow-x: hidden;
}

.notification-list{
    padding-block: 10px;
    margin: 0;
    position: relative;
    width: 100%;
}

.notification-div {
    margin-top: 10px;
    margin-bottom: 15px;
    height: 80px;
    width: 100%;
    border-radius: 15px;
    padding: 10px;
    background: linear-gradient(135deg, #5e9beb, #4a89dc);
    color: #fff;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid #242424;
}

.receipt-color{
    background: linear-gradient(135deg, #a0d46b, #8cc152) !important;
}

.offer-color{
    background: linear-gradient(135deg, #656d78, #434a54) !important;
}

.warning-color{
    background: linear-gradient(135deg, #fb6e51, #e9573f) !important;
}

.notification-div:hover {
    background: linear-gradient(135deg, #5087cf, #2760aa);
    transform: scale(1.02);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
}

.notif-icon{
    position: absolute;
    top: -10px;
    font-size: 20px;
}

.notif-icon i{
    text-shadow:
    -1px 0 black,  /* Left shadow */
    0 1px black,   /* Top shadow */
    1px 0 black,   /* Right shadow */
    0 -1px black;
    transition: all 1.5s ease;
}

.notif-icon i:hover{
    animation: wiggle 2s ease infinite;
}

.notif-icon h6{
    font-size: 12px !important;
    position: absolute;
    top: 2px;
    left: 20px;
    border-radius: 5px;
}

.notif-content{
    margin-top: 10px;
}

@keyframes wiggle {
    0%, 10%, 95%, 100% {
        transform: rotate(0deg) scale(1); /* Start and end at 0 degrees */
    }
    20% {
        transform: rotate(10deg) scale(1.3); /* Wiggle to 5 degrees */
    }
    25% {
        transform: rotate(-10deg) scale(1.3); /* Wiggle to 5 degrees */
    }
    30% {
        transform: rotate(10deg) scale(1.3); /* Wiggle to 5 degrees */
    }
    35% {
        transform: rotate(-10deg) scale(1.3); /* Wiggle to 5 degrees */
    }
    40% {
        transform: rotate(10deg) scale(1.3); /* Wiggle to 5 degrees */
    }
    45% {
        transform: rotate(-10deg) scale(1.3); /* Wiggle to 5 degrees */
    }
    50% {
        transform: rotate(10deg) scale(1.3); /* Wiggle to 5 degrees */
    }
    55% {
        transform: rotate(-10deg) scale(1.3); /* Wiggle to 5 degrees */
    }
    60% {
        transform: rotate(10deg) scale(1.3); /* Wiggle to 5 degrees */
    }
    65% {
        transform: rotate(-10deg) scale(1.3); /* Wiggle to 5 degrees */
    }
    70% {
        transform: rotate(10deg) scale(1.3); /* Wiggle back to -5 degrees */
    }
    75% {
        transform: rotate(-10deg) scale(1.3); /* Wiggle to 5 degrees again */
    }
    80% {
        transform: rotate(10deg) scale(1.3); /* Wiggle back to -5 degrees again */
    }
    85% {
        transform: rotate(-10deg) scale(1.3); /* Wiggle back to -5 degrees again */
    }
}

.notif-indicator{
    position: absolute;
    top: -8px;
    right: 5px;
    width: auto;
    background: linear-gradient(135deg, #ed5565, #da4453);
    border-radius: 10px;
    color: white;
    font-size: 10px;
    padding: 5px;
    transition: all 1.5s ease;
}

.notif-indicator span{
    font-size: 10px;
    font-weight: 800;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.notif-indicator:hover{
    animation: wiggle 2s ease infinite;
}

.notif-time {
    color: #242424;
    display: flex; /* Enable flexbox */
    justify-content: flex-end; /* Align content to the end horizontally */
    align-items: center;
}

.notif-time span{
    text-align: right;
}

.notif-icon-btn{
    position: relative;
}

.notif-btn{
    position: absolute;
    font-family: Comic Sans MS, Comic Sans, cursive;
    font-size: 8px;
    background: linear-gradient(135deg, #ed5565, #da4453);
    color: #fff;
    padding: 4px;
    border-radius: 10px;
    top: -5px;
    left: -20px;
}

.notif-btn-remove{
    position: absolute;
    top: 5px;
    right: 5px;
}

.notif-btn-remove button{
    color: #fff;
    font-size: 12px;
    transition: all 0.5s ease;
    background-color: transparent;
    border: 0;
}

.notif-btn-remove:hover button{
    color: #1d1d1d;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}

.notif-btn-remove button:first{
    color: #1d1d1d;
}