@keyframes fadeOut {
        from {
            opacity: 1
        }

        to {
            opacity: 0
        }
    }

    .fadeOut {
        animation-name: fadeOut
    }

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translate3d(0, -100%, 0)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .fadeInDown {
        animation-name: fadeInDown
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 100%, 0)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .fadeInUp {
        animation-name: fadeInUp
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity 150ms ease-out
    }

    .fade-enter, .fade-leave-to {
        opacity: 0
    }

    .notices {
        position: fixed;
        display: flex;
        top: 15px;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2em;
        overflow: hidden;
        z-index: 1052;
        pointer-events: none
    }

    .notices .toast {
        display: inline-flex;
        align-items: center;
        animation-duration: 150ms;
        margin: .5em 0;
        box-shadow: 0 1px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);
        border-radius: .25em;
        pointer-events: auto;
        opacity: .92;
        color: #fff;
        min-height: 3em;
        cursor: pointer
    }

    .notices .toast .toast-text {
        width: 250px;
        margin: 0;
	    font-size: 14px;
        padding: .5em 1em;
        word-break: break-all
    }

    .notices .toast .toast-icon {
		display: none
    }

    .notices .toast-success {
        background-color: #28a745
    }

    .notices .toast-info {
        background-color: #17a2b8
    }

    .notices .toast-warning {
        background-color: #ffc107
    }

    .notices .toast-error {
        background-color: #dc3545
    }

    .notices .toast-default {
        background-color: #343a40
    }

    .notices .toast.is-top, .notices .toast.is-bottom {
        align-self: center
    }

    .notices .toast.is-top-right, .notices .toast.is-bottom-right {
        align-self: flex-end
    }

    .notices .toast.is-top-left, .notices .toast.is-bottom-left {
        align-self: flex-start
    }

    .notices.is-top {
        flex-direction: column
    }

    .notices.is-bottom {
        flex-direction: column-reverse
    }

    .notices.is-custom-parent {
        position: absolute
    }

    @media screen and (max-width: 768px) {
        .notices {
            padding: 0;
            position: fixed !important
        }
    }