@keyframes my_fade_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-webkit-keyframes my_fade_animation {
  from { opacity:1; }
  to { opacity:0; }
}



/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/

.animated-view.well {
    /* height: 65px; */
    background-color: transparent;
    padding-top: 0px;
    border: none;
    box-shadow: none!important;
    border-radius: 0;
}

.ui-view-container {
  position: relative;
}


/* The starting CSS styles for the enter animation */
.ng-enter {
  transition: 0.5s;
  opacity: 0; 

}

/* The finishing CSS styles for the enter animation */
.ng-enter-active {
  opacity: 1; }


/* now the element will fade out before it is removed from the DOM */
.ng-leave {
  transition: 0.25s;
  opacity: 1; }
.ng-leave-active {
  opacity: 0; }



/*Progress Report Tab*/
/* The starting CSS styles for the enter animation */
.pr-history-container.ng-enter {
      transition: 0.5s;
  opacity: 0; 

}

 /*The finishing CSS styles for the enter animation*/ 
.pr-history-container.ng-enter-active {
     opacity: 1; 
}


 /*now the element will fade out before it is removed from the DOM*/ 
.pr-history-container.ng-leave {
  transition: 0.25s;
  opacity: 1; 

}
.pr-history-container.ng-leave-active {
   opacity: 0; 

}