.notifications_list{
    position: absolute;
    left: calc(50dvw - 250px);
    bottom: 20px;

    height: fit-content;
    width: 500px;

    .notification{
        margin: 10px 0;
    }
}

.notification{
    --padding: 5px 10px;
    --background: #fff;
    --border: 1px solid #c0c0c0;
    padding: var(--padding);
    background: var(--background);
    border: var(--border);

    box-shadow: 0 3px 14px rgba(74, 58, 255, 0.03), 0 -2px 4px rgba(20, 20, 43, 0.12), 0 12px 44px rgba(20, 20, 43, 0.34);
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    gap: 10px;

    width: 100%;

    .content{
        font-size: 14px;
        font-weight: 400;
        overflow-wrap: anywhere;
    }

    div.cross{
        width: 18px;
        height: 18px;
        padding: 3px 4px;
        background: #f6f6f6;
        border-radius: 5px;
        cursor: pointer;
        img{
            --filter: brightness(0) saturate(100%) invert(82%) sepia(0%) saturate(1492%) hue-rotate(155deg) brightness(95%) contrast(87%);
            width: 10px;
            display: block;
            cursor: pointer;
            filter: var(--filter);
            &:hover{
                --filter: none;
            }
        }
        &:hover{
            background: #e2e2e2;
            img{
                --filter: brightness(0) saturate(100%) invert(17%) sepia(20%) saturate(29%) hue-rotate(314deg) brightness(93%) contrast(89%);
            }
        }
    }
}