/* #toast */

#toast-wrapper {
   position: fixed;z-index: 10000000;right:-300px;bottom: -300px;
}

@media screen and (min-width: 381px){
   #toast-wrapper {width: 300px;}
}
@media screen and (max-width: 380px){
   #toast-wrapper {max-width: calc(100% - 60px);}
}

#toast-wrapper.open {
   bottom: 30px; right: 30px;
   -webkit-animation: fadein 0.5s;
   animation: fadein 0.5s;
}

#toast-wrapper.close {
   -webkit-animation: fadeout 0.5s;
   animation: fadeout 0.5s;
}

@-webkit-keyframes fadein {
   from {bottom: -300px; right: -300px; opacity: 0;} 
   to {bottom: 30px; right: 30px; opacity: 1;}
}

@keyframes fadein {
   from {bottom: -300px; right: -300px; opacity: 0;}
   to {bottom: 30px; right: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
   from {bottom: 30px; right: 30px; opacity: 1;} 
   to {bottom: -300px; right: -300px; opacity: 0;}
}

@keyframes fadeout {
   from {bottom: 30px; right: 30px; opacity: 1;}
   to {bottom: -300px; right: -300px; opacity: 0;}
}

div.toast{position: relative;color: #fff;background:#555;border:1px dashed #888;border-radius:5px;padding:13px 15px 13px 30px}
div.toast.error{color: orangered;background:white;border-color:orangered;}
div.toast:not(:first-child){margin-top:8px;}

div.toast:last-child{border-style:solid;background:#333;}
div.toast.error:last-child{color:white;background:orangered;}

div.toast > i{position:absolute;top:16px;left:11px;cursor:pointer;}
div.toast > i:hover{opacity:.8;}

div.toast > span{font-size: 13px;}

/* #toast -> cart . grid */
#toast-wrapper .row{position:relative;}
#toast-wrapper .thumb, #toast-wrapper .box{padding:0;} 
#toast-wrapper .box{padding-left:10px;}
#toast-wrapper .thumb > img{max-width:100%;border-radius:3px;}
#toast-wrapper .badge{
   position: absolute;
   right: -35px;
   top: -35px;
}