@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');

.wnoty-notification,.wnoty-notification *,.wnoty-notification *:after,.wnoty-notification *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wnoty-notification.wnoty-hide {
    -webkit-animation-name: animFade;
    animation-name: animFade;
    -webkit-animation-duration: .25s;
    animation-duration: .25s;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.wnoty-top-left .wnoty-notification.wnoty-show, .wnoty-bottom-left .wnoty-notification.wnoty-show {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.wnoty-top-right .wnoty-notification.wnoty-show, .wnoty-bottom-right .wnoty-notification.wnoty-show {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.wnoty-notification {
    position: relative;
    border-radius: 5px;
    background: rgb(245,245,245);
    padding: 25px;
    line-height: 1.4;
    z-index: 1000;
    pointer-events: none;
    color: rgba(250,251,255,0.95);
    font-size: 90%;
    font-family: 'Segoe UI','Segoe UI',Helvetica,Segoe UI,Segoe UI;
    max-width: 370px;
    z-index: 9999999999999;
    box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
    margin: 5px 0;
    pointer-events: auto;
}

.wnoty-notification p {
    margin: 0;
    line-height: 1.3;
    font-size: 14px;
    color: #000;
    font-weight: 300;
}

.wnoty-notification a {
    opacity: .7;
    font-weight: 700;
    text-decoration: none;
}

.wnoty-notification a:hover,.wnoty-notification a:focus {
    color: #fff!important;
    opacity: 1;
}

.wnoty-close {
    width: 27px;
    height: 27px;
    position: absolute;
    right: 15px;
    top: 50%;
    overflow: hidden;
    text-indent: 100%;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin-top: -14px;
    opacity: 0.3;
    transition: 0.3s linear;
}

.wnoty-close::before,.wnoty-close::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 60%;
    top: 50%;
    left: 50%;
    background: #6e6e6e;
}

.wnoty-close::after {
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg);
}

.wnoty-close::before {
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
}

.wnoty-close:hover,.wnoty-close:focus {
    outline: 0;
    opacity: 1;
}

@-webkit-keyframes animFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes animFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    0% {
        transform: translate3d(-100%,0,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes slideInRight {
    0% {
        transform: translate3d(100%,0,0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.wnoty-notification .wnoty-wrapper i.fa.wnoty-icon, .wnoty-notification .wnoty-wrapper i.fas.wnoty-icon {
    position: absolute;
    left: 17px;
    top: 50%;
    font-size: 24px;
    margin-top: -12px;
}

.wnoty-wrapper {
    padding-left: 25px;
    padding-right: 30px;
}

.wnoty-notification .wnoty-close::before,.wnoty-notification .wnoty-close::after {
    background: #000000;
}

.wnoty-notification.wnoty-info {
    border-left: 5px solid #2196f3;
    color: #2196f3;
}

.wnoty-notification.wnoty-info a {
    color: #004780;
}

.wnoty-notification.wnoty-success {
    border-left: 5px solid #3ec569;
    color: #3ec569;
}

.wnoty-notification.wnoty-success a {
    color: #007330;
}

.wnoty-notification.wnoty-error {
    border-left: 5px solid #e43e3e;
    color: #e43e3e;
}

.wnoty-notification.wnoty-error a {
    color: #7c1313;
}

.wnoty-notification.wnoty-warning {
    border-left: 5px solid #ffe008;
    color: #ffe008;
}

.wnoty-notification.wnoty-warning a {
    color: #a97515;
}

.wnoty-block {
    position: fixed;
    z-index: 99999;
}

.wnoty-block.wnoty-top-left {
    top: 30px;
    left: 30px;
}

.wnoty-block.wnoty-top-right {
    top: 30px;
    right: 30px;
}

.wnoty-block.wnoty-bottom-left {
    bottom: 30px;
    left: 30px;
}

.wnoty-block.wnoty-bottom-right {
    bottom: 30px;
    right: 30px;
}