/*-----------------------Notification----------------------*/
.notification {
    z-index: 30;
    position: fixed;
    top: 42px;
    left: 50%;
    color: var(--white);
    background-color: var(--thirdFront);
    padding: 17px 26px 17px 78px;
    font-size: 16px;
    line-height: 20px;
    max-width: 80%;
    margin-left: -40%;
    cursor: pointer
}

    .notification.error:before {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        padding: 0 18px;
        margin-top: -11px;
        color: #f93;
        font-size: 22px
    }

    .notification.success:before {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        padding: 0 20px;
        margin-top: -11px;
        color: var(--firstFocus);
        font-size: 13px
    }

    .notification.info:before {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        padding: 0 20px;
        margin-top: -11px;
        color: #17a2b8;
        font-size: 13px
    }

    .notification:after {
        content: '';
        position: absolute;
        top: 0;
        left: 60px;
        height: 100%;
        border-right: 1px solid var(--firstFront)
    }

@media all and (min-width:750px) {
    .notification {
        max-width: 600px;
        margin-left: -300px
    }
}

@media all and (max-width:400px) {
    .notification {
        max-width: 96%;
        margin-left: -48%
    }
}


/*-----------------------End Notification---------------------*/