/* the "position: absolue"" breaks md-stepper, but it is needed for the transitions
need to find a way around it at some point 

.ui-view-container {
  position: relative;
  height: 450px;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  -webkit-transition:all .3s linear;
    -moz-transition:all .3s linear;
    -o-transition:all .3s linear;
    transition:all .3s linear;
}

[ui-view].ng-enter {
  opacity: 0;
}

[ui-view].ng-enter-active {
  opacity: 1;
}

[ui-view].ng-leave {
  opacity: 1; 
}

[ui-view].ng-leave-active {
  opacity: 0;
  height: 0px;
}
*/

.loader {
  position: absolute;
  width: $width;
  height: $width;
  left: 50%;

  top: 20%;
}

.circular{
 animation: rotate 2s linear infinite;
 height: $width;
 position: relative;
 width: $width;
}


.path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  animation:
   dash 1.5s ease-in-out infinite,
   color 6s ease-in-out infinite
  ;
  stroke-linecap: round;
}

@keyframes rotate{
 100%{
  transform: rotate(360deg);
 }
}
@keyframes dash{
 0%{
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
 }
 50%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -35;
 }
 100%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -124;
 }
}
@keyframes color{
  100%, 0%{
    stroke: $red;
  }
  40%{
    stroke: $blue;
  }
  66%{
    stroke: $green;
  }
  80%, 90%{
    stroke: $yellow;
  }
}

.bottomSheetdemoBasicUsage .md-inline-list-icon-label {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: -10px;
  height: 24px;
  vertical-align: middle; }

.bottomSheetdemoBasicUsage .md-grid-item-content {
  height: 90px;
  padding-top: 10px; }

.bottomSheetdemoBasicUsage .md-grid-item-content md-icon {
  height: 48px;
  width: 48px; }

.bottomSheetdemoBasicUsage .md-grid-text {
  padding-bottom: 5px; }

.bottomSheetdemoBasicUsage md-list-item, .bottomSheetdemoBasicUsage md-list-item ._md-list-item-inner {
  min-height: 48px; }

.bottomSheetdemoBasicUsage h2 {
  line-height: 36px;
  padding-top: 10px; }

.bottomSheetdemoBasicUsage .md-subheader ._md-subheader-inner {
  padding: 0; }

.bottomSheetdemoBasicUsage md-toast .md-toast-content {
  background-color: #B14141; }

.bottomSheetdemoBasicUsage md-toast > * {
  font-weight: bolder; }