/**
 * The Place for all the fancy animations which makes it cooler for the end-user.
 */



/**
 * NG-IF
 * Source: https://docs.angularjs.org/api/ng/directive/ngRepeat
 */

.animate-if {
  background: white;
  /* border: 1px solid black; */
  padding: 10px;
}

.animate-if.ng-enter, .animate-if.ng-leave {
  -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
          transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
  opacity: 0;
}

.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
  opacity: 1;
}



/**
 * NG-REPEAT
 * Source: https://docs.angularjs.org/api/ng/directive/ngRepeat
 */
 
.animate-repeat-container {
  /* background: white; */
  /* border:1px solid black; */
  list-style: none;
  margin: 0;
  padding: 0 1em;
}

.animate-repeat {
  line-height: 2em;
  list-style: none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*
*/
.animate-repeat.ng-enter,
.animate-repeat.ng-move,
.animate-repeat.ng-leave {
  -webkit-transition: all 0.25s ease-out;
          transition: all 0.25s ease-out;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
  opacity: 0;
  max-height: 0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
  opacity: 1;
  max-height: 2em;
}