@keyframes awn-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes awn-fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes awn-slide-right {
    0% {
        left: 100%;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

@keyframes awn-slide-left {
    0% {
        opacity: 0;
        right: 100%
    }

    to {
        opacity: 1;
        right: 0
    }
}

@keyframes awn-bar {
    0% {
        right: 100%
    }

    to {
        right: 0
    }
}

.awn-popup-loading-dots, .awn-popup-loading-dots:after, .awn-popup-loading-dots:before {
    animation-fill-mode: both;
    animation: awn-loading-dots 1s ease-in-out infinite;
    background: #fff;
    border-radius: 50%;
    height: 6px;
    width: 6px
}

.awn-popup-loading-dots {
    animation-delay: -.16s;
    color: #fff;
    display: inline-block;
    margin-left: 24px;
    position: relative
}

    .awn-popup-loading-dots:after, .awn-popup-loading-dots:before {
        content: "";
        position: absolute;
        top: 0
    }

    .awn-popup-loading-dots:before {
        animation-delay: -.32s;
        left: -16px
    }

    .awn-popup-loading-dots:after {
        left: 16px
    }

@keyframes awn-loading-dots {
    0%,80%,to {
        box-shadow: 0 0 0 0
    }

    40% {
        box-shadow: 0 0 0 2px
    }
}

#awn-popup-wrapper {
    align-items: center;
    animation-fill-mode: both;
    animation-name: awn-fade-in;
    animation-timing-function: ease-out;
    background: rgba(0,0,0,.7);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999
}

    #awn-popup-wrapper.awn-hiding {
        animation-name: awn-fade-out
    }

    #awn-popup-wrapper .awn-popup-body {
        background: #fff;
        border-radius: 6px;
        font-size: 14px;
        max-width: 500px;
        min-width: 320px;
        padding: 24px;
        position: relative;
        word-break: break-word
    }

        #awn-popup-wrapper .awn-popup-body.awn-popup-confirm {
            align-items: center;
            display: flex;
            flex-direction: column
        }

            #awn-popup-wrapper .awn-popup-body.awn-popup-confirm .fa {
                color: #c26700;
                font-size: 44px
            }

        #awn-popup-wrapper .awn-popup-body.awn-popup-async-block {
            background: transparent;
            color: #fff;
            font-size: 32px;
            font-weight: 700;
            text-align: center
        }

    #awn-popup-wrapper .awn-popup-title {
        font-size: 14px;
        font-weight: 700;
        margin-top: 8px;
        text-transform: uppercase
    }

    #awn-popup-wrapper .awn-buttons {
        display: flex;
        justify-content: space-between;
        margin-top: 24px;
        width: 100%
    }

        #awn-popup-wrapper .awn-buttons .awn-btn {
            border: 0;
            border-radius: 4px;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            line-height: 32px;
            transition: background .2s linear;
            width: 45%
        }

    #awn-popup-wrapper .awn-buttons-1 .awn-btn {
        width: 100%
    }

    #awn-popup-wrapper .awn-buttons .awn-btn-success {
        background: #40871d
    }

        #awn-popup-wrapper .awn-buttons .awn-btn-success:hover {
            background: #367218
        }

    #awn-popup-wrapper .awn-buttons .awn-btn-cancel {
        background: #1c76a6
    }

        #awn-popup-wrapper .awn-buttons .awn-btn-cancel:hover {
            background: #186690
        }

#awn-toast-container {
    bottom: 24px;
    box-sizing: border-box;
    position: fixed;
    right: 24px;
    z-index: 99998
}

    #awn-toast-container.awn-top-left, #awn-toast-container.awn-top-right {
        bottom: auto;
        top: 24px
    }

        #awn-toast-container.awn-top-left .awn-toast:first-child, #awn-toast-container.awn-top-right .awn-toast:first-child {
            margin-top: 16px
        }

    #awn-toast-container.awn-bottom-left, #awn-toast-container.awn-top-left {
        left: 24px;
        right: auto
    }

        #awn-toast-container.awn-bottom-left .awn-toast, #awn-toast-container.awn-top-left .awn-toast {
            animation-name: awn-slide-left;
            right: 100%
        }

            #awn-toast-container.awn-bottom-left .awn-toast.awn-hiding, #awn-toast-container.awn-top-left .awn-toast.awn-hiding {
                right: 0
            }

    #awn-toast-container.awn-bottom-right .awn-toast, #awn-toast-container.awn-top-right .awn-toast {
        animation-name: awn-slide-right;
        left: 100%
    }

        #awn-toast-container.awn-bottom-right .awn-toast.awn-hiding, #awn-toast-container.awn-top-right .awn-toast.awn-hiding {
            left: 0
        }

.awn-toast {
    animation-fill-mode: both;
    animation-timing-function: linear;
    background: #ebebeb;
    border-radius: 6px;
    color: gray;
    cursor: pointer;
    font-size: 14px;
    margin-top: 16px;
    opacity: 0;
    overflow: hidden;
    position: relative;
    width: 320px
}

.awn-toast-content {
    word-break: break-word
}

.awn-toast-label {
    color: gray;
    display: block;
    font-size: 18px;
    /* text-transform:uppercase; */
}

.awn-toast-icon {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 16px;
    top: 6px
}

    .awn-toast-icon .fa {
        color: gray;
        font-size: 44px
    }

.awn-toast-wrapper {
    border: 2px solid #d1d1d1;
    border-radius: 6px;
    padding: 22px 88px 16px 16px
}

.awn-toast-progress-bar {
    height: 6px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

    .awn-toast-progress-bar:after {
        animation-duration: inherit;
        animation-fill-mode: both;
        animation-name: awn-bar;
        animation-timing-function: linear;
        background: gray;
        content: " ";
        height: 6px;
        position: absolute;
        right: 100%;
        top: 0;
        width: 100%
    }

.awn-toast.awn-toast-progress-bar-paused .awn-toast-progress-bar:after {
    animation-play-state: paused
}

.awn-toast.awn-hiding {
    animation-name: awn-fade-out !important
}

.awn-toast.awn-toast-success {
    background: #dff8d3;
    color: #40871d
}

    .awn-toast.awn-toast-success .awn-toast-wrapper {
        border-color: #a7d590
    }

    .awn-toast.awn-toast-success .fa, .awn-toast.awn-toast-success b {
        color: #40871d
    }

    .awn-toast.awn-toast-success .awn-toast-progress-bar:after {
        background: #40871d
    }

.awn-toast.awn-toast-info {
    background: #d3ebf8;
    color: #1c76a6
}

    .awn-toast.awn-toast-info .awn-toast-wrapper {
        border-color: #9fd3ef
    }

    .awn-toast.awn-toast-info .fa, .awn-toast.awn-toast-info b {
        color: #1c76a6
    }

    .awn-toast.awn-toast-info .awn-toast-progress-bar:after {
        background: #1c76a6
    }

.awn-toast.awn-toast-alert {
    background: #f8d5d3;
    color: #a92019
}

    .awn-toast.awn-toast-alert .awn-toast-wrapper {
        border-color: #f0a29d
    }

    .awn-toast.awn-toast-alert .fa, .awn-toast.awn-toast-alert b {
        color: #a92019
    }

    .awn-toast.awn-toast-alert .awn-toast-progress-bar:after {
        background: #a92019
    }

.awn-toast.awn-toast-warning {
    background: #ffe7cc;
    color: #c26700
}

    .awn-toast.awn-toast-warning .awn-toast-wrapper {
        border-color: #ffc480
    }

    .awn-toast.awn-toast-warning .fa, .awn-toast.awn-toast-warning b {
        color: #c26700
    }

    .awn-toast.awn-toast-warning .awn-toast-progress-bar:after {
        background: #c26700
    }

[class^=awn-] {
    box-sizing: border-box
}