.notify {
    display: none;
    position: fixed; /* Directions set by JS */
    z-index: 100000;
    width: 100%;
}

[data-notify-state='active'] {
    display: block;
}

.notify_item {
    margin: 0 0 10px;
    padding: 12px 15px;
    line-height: 1.3em;
    transition: all 250ms ease-out;
    min-height: 57px;
}

[data-notify-item-state='slide-in'] {
    transform: translate3d(0, 0, 0);
}

[data-notify-item-state='fade-out'] {
    transform: translate3d(0, 0, 0); /* Retain initial transformation when status is swapped */
    opacity: 0;
}

.notify_item {
    border-radius: 3px;
    background: #FFF;
    box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.1),
            0 2px 5px rgba(0, 0, 0, 0.2);

    font-size: 20px;
    text-align: center;
    vertical-align: middle;
    color: white;
    padding-top: 15px;
}

.notify_item--danger  { background: #EE3124; }
.notify_item--help    { background: #A98CEC; }
.notify_item--info    { background: #1F67CC; }
.notify_item--success { background: #49A942; }
.notify_item--warn    { background: #ECDA00; }

.notify_item a {
    color: white;
    text-decoration: underline;
    text-decoration-color: white;
}