div.side-menu{
  top: 146px;
  bottom: 0px;
  left: 0px;
}
div.side-menu.on-page {
    top: 75px;
    bottom: 0px;
    right: 0px;
    left: auto;
}
div.side-menu.on-page.my-tosy {
  top: 75px;
  bottom: 0px;
  left: 0px;
  right: auto;
}
div.side-menu.collapsed{
  top: 146px;
  bottom: 0px;
  left: -172px;
}
div.side-menu.on-page.collapsed{
  top: 75px;
  bottom: 0px;
  right: -172px;
  left: auto;
}
div.side-menu.on-page.my-tosy.collapsed{
  top: 75px;
  bottom: 0px;
  left: -172px;
  right: auto;
}
div.side-menu,
div#dashboard div.dashboard-content div.discipline-detail-view,
div.tournament-info-view{
  -webkit-transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -o-transition:0.2s ease all;
  transition:0.2s ease all;
}

div#dashboard div.side-menu ul li.discipline-status ul{	
  -webkit-transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -o-transition:0.2s ease all;
  transition:0.2s ease all;
}

.global-loading {
	position:fixed;
	bottom: 45px;
	left:20px;
	opacity:1;
  -webkit-transition:all linear 0.2s;
  transition:all linear 0.2s;
}

.global-loading.ng-hide {
  opacity:0;
}


/*
  We're using CSS transitions for when
  the enter and move events are triggered
  for the element that has the .popup-fixed-alert
  class
*/
.popup-fixed-alert.ng-enter, .popup-fixed-alert.ng-move {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;
  opacity:0;
}

/*
 The ng-enter-active and ng-move-active
 are where the transition destination properties
 are set so that the animation knows what to
 animate.
*/
.popup-fixed-alert.ng-enter.ng-enter-active,
.popup-fixed-alert.ng-move.ng-move-active {
  opacity:1;
}

/*
  We're using CSS keyframe animations for when
  the leave event is triggered for the element
  that has the .popup-fixed-alert class
*/
.popup-fixed-alert.ng-leave {
  -webkit-animation:0.5s my_animation;
  -moz-animation:0.5s my_animation;
  -o-animation:0.5s my_animation;
  animation:0.5s my_animation;
}

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

/*
  Unfortunately each browser vendor requires
  its own definition of keyframe animation code...
*/
@-webkit-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-moz-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-o-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}