#toasts {
  min-height: 10px;
  position: fixed;
  left: 55%;
  top: 90%;
  width: 300px;
  transform: translate(-50%, -50%);
  z-index: 2000;
}

#toasts .toast {
  background: #d6d8d9;
  border-radius: 5px;
  box-shadow: 5px 5px 8px rgba(0, 0, 0, .2);
  color: rgba(0,0,0, .6);
  cursor: default;
  opacity: 0;
  position: relative;
  transform: translateY(15%);
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  width: 100%;
  will-change: opacity, transform;
  z-index: 1100;
  padding: 8px;
} 

#toasts .toast b{
    text-decoration: none;
    font-weight: 100;
}

#toasts .toast.success {
  background: #26d68a;
  color: #fff;
}

#toasts .toast.warning {
  background: #d49500;
  color: #fff;
}

#toasts .toast.warning b {
  margin-left: 30px
}

#toasts .toast.warning b:before {
  font-family: "FontAwesome";
  font-size: 20px;
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  position: absolute;
  left: 10px;
  top: 3px;
  content: "\f06a";
}

#toasts .toast.info {
  background: #3c8dbc;
  color: #fff;
}

#toasts .toast.info b {
  margin-left: 30px
}

#toasts .toast.info b:before {
  font-family: "FontAwesome";
  font-size: 20px;
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  position: absolute;
  left: 10px;
  top: 3px;
  content: "\f058";
}

#toasts .toast.error {
  background: #f44336;
  color: #fff;
}

#toasts .toast.error b {
  margin-left: 30px
}

#toasts .toast.error b:before {
  font-family: "FontAwesome";
  font-size: 20px;
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  position: absolute;
  left: 10px;
  top: 3px; 
  content: "\f057";
}

#toasts .toast.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}

#toasts .toast.hide {
  height: 0;
  margin: 0;
  opacity: 0.5;
  overflow: hidden;
  padding: 0 30px;
  /*transition: all .5s ease-in-out;*/
  transition: all 50s ease-in-out;
}

#toasts .toast .close-toast {
  cursor: pointer;
  font-size: 12px;
  height: 4px;
  width: 4px;
  /*margin-top: 2px;*/
  position: absolute;
  right: 14px;
  top: 6px;
  color: #fff;
}

@media screen and (max-width: 767px) {
    #toasts {
      right: 20px;
      top: 120px;
      width: 80%;
    }
}