/* ==========================================================
    UI MANAGER TOASTS
========================================================== */

.toast-container {

    z-index: 999999;
    width: 380px;
    max-width: calc(100vw - 30px);

}

/* ==========================================================
    TOAST
========================================================== */

.app-toast {

    background: #ffffff;

    border: none;

    border-radius: 10px;

    overflow: hidden;

    margin-bottom: 10px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.12);

    animation: toastIn .30s cubic-bezier(.2,.8,.2,1);

    transition: .2s;

}

.app-toast:hover{

    transform:translateY(-2px);

    box-shadow:

        0 14px 32px rgba(0,0,0,.18);

}

/* ==========================================================
    HEADER
========================================================== */

.app-toast .toast-header {

    background: transparent;

    border-bottom: 1px solid #f2f2f2;

    display: flex;

    align-items: center;

    padding: 8px 12px;

    min-height: auto;

}

/* ==========================================================
    ICON
========================================================== */

.toast-icon{

    width:26px;

    height:26px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-right:10px;

    flex-shrink:0;

}

.toast-icon svg{

    width:14px;

    height:14px;

}

/* ==========================================================
    TITLE
========================================================== */

.toast-header-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.toast-title{

    font-size:15px;

    font-weight:600;

    color:#222;

    line-height:1;

    margin:0;

}

.toast-time{

    font-size:11px;

    color:#9aa0ac;

    margin-top:2px;

}

/* ==========================================================
    CLOSE BUTTON
========================================================== */

.app-toast .btn-close{

    margin-left:12px;

    opacity:.45;

    transform:scale(.8);

    transition:.2s;

}

.app-toast .btn-close:hover{

    opacity:1;

    transform:scale(.9);

}

/* ==========================================================
    BODY
========================================================== */

.app-toast .toast-body{

    padding:12px 14px;

    font-size:13px;

    line-height:1.45;

    color:#555;

}

/* ==========================================================
    PROGRESS BAR
========================================================== */

.toast-progress{

    height:3px;

    background:#f2f2f2;

}

.toast-progress-bar{

    height:100%;

    border-radius:10px;

}

/* ==========================================================
    SUCCESS
========================================================== */

.toast-success {

    border-left: 5px solid #28c76f;

}

.toast-success .toast-icon {

    background: rgba(40,199,111,.12);

}

.toast-success .toast-icon svg {

    color: #28c76f;

}

.toast-success .toast-progress-bar {

    background: #28c76f;

}

/* ==========================================================
    ERROR
========================================================== */

.toast-danger {

    border-left: 5px solid #ea5455;

}

.toast-danger .toast-icon {

    background: rgba(234,84,85,.12);

}

.toast-danger .toast-icon svg {

    color: #ea5455;

}

.toast-danger .toast-progress-bar {

    background: #ea5455;

}

/* ==========================================================
    WARNING
========================================================== */

.toast-warning {

    border-left: 5px solid #ff9f43;

}

.toast-warning .toast-icon {

    background: rgba(255,159,67,.15);

}

.toast-warning .toast-icon svg {

    color: #ff9f43;

}

.toast-warning .toast-progress-bar {

    background: #ff9f43;

}

/* ==========================================================
    INFO
========================================================== */

.toast-info {

    border-left: 5px solid #0d6efd;

}

.toast-info .toast-icon {

    background: rgba(13,110,253,.12);

}

.toast-info .toast-icon svg {

    color: #0d6efd;

}

.toast-info .toast-progress-bar {

    background: #0d6efd;

}

/* ==========================================================
    ANIMATIONS
========================================================== */

@keyframes toastIn {

    0% {

        opacity: 0;

        transform: translateX(100px) scale(.9);

    }

    70% {

        opacity: 1;

        transform: translateX(-8px) scale(1.02);

    }

    100% {

        transform: translateX(0) scale(1);

    }

}

.toast-hide {

    animation: toastOut .25s ease forwards;

}

@keyframes toastOut {

    to {

        opacity: 0;

        transform: translateX(100px);

    }

}

@keyframes toastProgress {

    from {

        width: 100%;

    }

    to {

        width: 0%;

    }

}

/* ==========================================================
    MOBILE
========================================================== */

@media (max-width: 576px) {

    .toast-container {

        width: calc(100vw - 20px);

        left: 10px;

        right: 10px;

    }

}