/*
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

/* INI UNTUK NOTIFIKASI */

.alert {
  border: 0;
  border-radius: 0;
  position: relative;
  padding: 20px 15px;
  line-height: 20px;
}
.alert b {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
}
.alert, .alert.alert-default {
  background-color: white;
  color: #555555;
  border-radius: 3px;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
}
.alert a, .alert .alert-link, .alert.alert-default a, .alert.alert-default .alert-link {
  color: #555555;
}
.alert.alert-inverse {
  background-color: #2e2e2e;
  color: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(33, 33, 33, 0.4);
}
.alert.alert-inverse a, .alert.alert-inverse .alert-link {
  color: #fff;
}
.alert.alert-primary {
  background-color: #af2cc5;
  color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
}
.alert.alert-primary a, .alert.alert-primary .alert-link {
  color: #ffffff;
}
.alert.alert-success {
  background-color: #5cb860;
  color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
}
.alert.alert-success a, .alert.alert-success .alert-link {
  color: #ffffff;
}
.alert.alert-info {
  background-color: #00bcd4;
  color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4);
}
.alert.alert-info a, .alert.alert-info .alert-link {
  color: #ffffff;
}
.alert.alert-warning {
  background-color: #ffa21a;
  color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
}
.alert.alert-warning a, .alert.alert-warning .alert-link {
  color: #ffffff;
}
.alert.alert-danger {
  background-color: #f55a4e;
  color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4);
}
.alert.alert-danger a, .alert.alert-danger .alert-link {
  color: #ffffff;
}
.alert.alert-rose {
  background-color: #eb3573;
  color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
}
.alert.alert-rose a, .alert.alert-rose .alert-link {
  color: #ffffff;
}
.alert-info, .alert-danger, .alert-warning, .alert-success, .alert-rose {
  color: #ffffff;
}
.alert-default a, .alert-default .alert-link {
  color: rgba(0,0,0, 0.87);
}
.alert span {
  display: block;
  max-width: 89%;
}
.alert.alert-danger i {
  color: #f44336;
}
.alert.alert-warning i {
  color: #ff9800;
}
.alert.alert-success i {
  color: #4caf50;
}
.alert.alert-info i {
  color: #00bcd4;
}
.alert.alert-primary i {
  color: #9c27b0;
}
.alert.alert-rose i {
  color: #e91e63;
}
.alert.alert-with-icon {
  margin-top: 43px;
  padding-left: 66px;
}
.alert.alert-with-icon i[data-notify="icon"] {
  display: block;
  left: 15px;
  position: absolute;
  margin-top: -39px;
  font-size: 20px;
  background-color: #FFFFFF;
  padding: 9px;
  border-radius: 50%;
  max-width: 38px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.alert .close i {
  color: #FFFFFF;
}
.alert i[data-notify="icon"] {
  display: none;
}
.alert .alert-icon {
  display: block;
  float: left;
  margin-right: 15px;
}
.alert .alert-icon i {
  margin-top: -7px;
  top: 5px;
  position: relative;
}
.alert [data-notify="dismiss"] {
  margin-right: 5px;
}