.notification-area {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 400px;
}
.notification-area .notification-list {
    position: relative;
    display: none;
    z-index: -1;
}
.notification-area .notification-list.show {
    display: block;
    z-index: 99999999;
}
.notification {
    position: relative;
    min-height: 80px;

    width: calc(100% - 30px);
    margin: 15px;
    background-color: rgb(52,52,52);
}
.notification .icon {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    background-color: rgb(192, 192, 192);
}
    .notification .icon.info {
        background-color: rgb(45,137,239);
    }
    .notification .icon.error {
        background-color: rgb(238,17,17);
    }
    .notification .icon.success {
        background-color: rgb(0,163,0);
    }
    .notification .icon.warning {
        background-color: rgb(255,196,13);
    }

    .notification .icon::before {
        content: " \2139"; 
        position: absolute;
        top: -2px;
        left: 0;
        right: 0;
        bottom: 0;
        font-size: 380%;
        color: rgb(255, 255, 255);
        line-height: 90%;
        font-weight:900;
        text-align:center;
        padding: 2px;
    }
.notification .title {
    position: absolute;
    top: 15px;
    left: 80px;
    height: 15px;
    right: 10px;
    line-height: 100%;
    font-size: 120%;
    font-weight: bold;
    color: rgb(255,255,255);
}
    .notification .message {
        display: inline-block;
        width: calc(100% - 80px);
        margin-top: 35px;
        margin-left: 80px;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
        word-spacing: normal;
        padding: 5px;
        padding-bottom: 15px;
        background-position-x: left;
        background-position-y: center;
        background-repeat: no-repeat;
        line-height: 100%;
        font-size: 100%;
        color: rgb(204,204,204);
    }
.notification button.close {
    min-height: 0;
    position: absolute;
    top: 5px;
    right: 5px;
    height: 15px;
    width: 15px;
    cursor: pointer;
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
}
    .notification button.close::before {
        content: "X";
        position: absolute;
        top: 1px;
        right: 1px;
        height: 13px;
        width: 13px;
        cursor: pointer;
        color: rgb(204,204,204);
    }