/*==================================
  Alert container
====================================*/
#lala-alert-container {
    position: fixed;
    height: auto;
    width: 337px;
    bottom: 0;
    right: 7px;
    z-index:999999999999;
    max-height: 90%;
    overflow-y: auto;
}

#lala-alert-wrapper {
    height: auto;
    padding: 15px;
    margin-bottom: -10px;
    overflow: hidden;
}

/*==================================
    Alerts
====================================*/

.lala-alert {
    position: relative;
    padding: 25px 30px 20px;
  font-size: 16px;
    margin-top: 15px;
    opacity: 1;
  line-height: 1.4;
  border-radius: 3px;
    border: 1px solid transparent;
    cursor: default;
    transition: all 0.5s ease-in-out;   /* Edit for fadeout time */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}

.lala-alert span {
  opacity: 0.7;
  transition: all 0.25s ease-in-out;   /* Edit for fadeout time */
}

.lala-alert span:hover {
  opacity: 1.0;
}

.alert-success {
    color: #ffffff;
    background-color: #2CAFE3;
}

.alert-success > span {
  color: #0b6f5e;
}

.alert-info {
  color: #666;
  background-color: #FFF;
}

.alert-info > span {
  color: #666;
}

.alert-warning {
    color: #6b7117;
    background-color: #ffee9e;
}

.alert-warning > span {
  color: #8a6d3b;
}

.alert-danger {
    color: #ffffff;
    background-color: #d64f62;
}

.alert-danger > span {
  color: #6f1414;
}

.close-alert-x {
    position: absolute;
    float: left;
    top: 5px;
    right: 10px;
    cursor: pointer;
    outline: none;
}

.fade-out {
    opacity: 0;
}

/*==================================
    Alert Animation
====================================*/
.animation-target {
  animation: animation 1500ms linear both;
}

/* Generated with Bounce.js. Edit at http://goo.gl/BKCT19 */

@-webkit-keyframes myfirst {
    0%   { opacity: 0.2;right: 0px; }
     15%  {opacity: 0.4; right: 50px;}

    25%  {background-color: #FFF; right: 0px;}
   30%  {background-color: #FFF; right: 3px;}
   40%  { background-color: #FFF;right: 0px;}
}
@keyframes animation {
    0%   { opacity: 0.2;right: 0px; }
     15%  {opacity: 0.4; right: 50px;}

    25%  {background-color: #FFF; right: 0px;}
   30%  {background-color: #FFF; right: 3px;}
   40%  { background-color: #FFF;right: 0px;}

}