.notif-button {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1500;
    transition: all 0.5s ease; /* smooth fade + slide */
    opacity: 1;
}

.notif-label-decoration {
    border-bottom: 3px solid green;
}

.notif-button-design {
    background: linear-gradient(90deg, hsla(116, 50%, 48%, 1) 0%, hsla(101, 43%, 46%, 1) 100%);
}

/* hidden state */
.notif-button.hidden {
    opacity: 0.4; /* grayed out */
    transform: translateX(80%); /* slide further right, only tip visible */
}

.altgradientone {
    background-image: linear-gradient(to top, #38e64c, #3ed43d, #40c22e, #41b01f, #3f9f0e);
}

.gradientbuttcancel {
    background-image: linear-gradient(to bottom, #68836b, #6c8e89, #80979d, #999fa6, #aaaaaa);
}

.gradientbuttnegative {
    background-image: linear-gradient(to bottom, #b21518, #c51c21, #d8232a, #eb2933, #ff303d);
}

.action-taken-butt {
    width: 300px;
}

.toggle-active {
    font-weight: bold;
    border-bottom: 2px solid #007bff; /* underline effect */
    cursor: pointer;
}

.toggle-inactive {
    color: #666;
    cursor: pointer;
}

.modal-notif-design {
    max-height: 400px;
}

@media (width <= 577px) {
    .action-taken-butt {
        width: 100%;
    }
}

@media (width >= 578px) and (width < 992px) {
    .action-taken-butt {
        width: 200px;
    }
}