.cg-busy, .cg-busy .cg-busy-template, .cg-busy .cg-busy-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%
}

.cg-busy {
  z-index: 1001;
  text-align: center;
}

[cg-busy], [angular-busy] {
  position: relative;
}

.cg-busy-animation.ng-hide-add,
.cg-busy-animation.ng-hide-remove {
  transition: all .3s ease;
  display: block !important;
}

.cg-busy-animation.ng-hide-remove {
  opacity: 0;
  transform: translate(0px, -40px);
}

.cg-busy-animation.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
  transform: translate(0px, 0px);
}

.cg-busy-animation.ng-hide-add {
  opacity: 1;
  transform: translate(0px, 0px);
}

.cg-busy-animation.ng-hide-add.ng-hide-add-active {
  opacity: 0;
  transform: translate(0px, -40px);
}

.cg-busy-backdrop {
  background-color: white;
  opacity: .7;
}

.cg-busy-backdrop-animation.ng-hide-add,
.cg-busy-backdrop-animation.ng-hide-remove {
  transition: opacity .3s ease;
  display: block !important;
}

.cg-busy-backdrop-animation.ng-hide {
  opacity: 0;
}

/* All styles below are for the default template. */

.cg-busy-default-sign {
  display: inline-block;
  position: relative;
  z-index: 1002;
  padding-bottom: 6px;
  color: #333333;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: #e9eeee;
  border: 1px solid #dddddd;
  border-top-width: 0;
  border-radius: 7px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}

.cg-busy-default-text {
  margin: 13px 12px 6px 49px;
  font-size: 16px;
  color: #555;
  text-align: left;
  max-width: 400px;
}

.cg-busy-default-spinner {
  position: absolute;
  width: 25px;
  height: 25px;
  display: inline-block;
  top: 12px;
  left: 14px;
}

.cg-busy-default-spinner div {
  width: 12%;
  height: 26%;
  background: #000;
  position: absolute;
  left: 44.5%;
  top: 37%;
  opacity: 0;
  animation: cg-busy-spinner-anim 1s linear infinite;
  border-radius: 50px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.cg-busy-default-spinner div.bar1 {
  transform: rotate(0deg) translate(0, -142%);
  animation-delay: 0s;
}

.cg-busy-default-spinner div.bar2 {
  transform: rotate(30deg) translate(0, -142%);
  animation-delay: -0.9167s;
}

.cg-busy-default-spinner div.bar3 {
  transform: rotate(60deg) translate(0, -142%);
  animation-delay: -0.833s;
}

.cg-busy-default-spinner div.bar4 {
  transform: rotate(90deg) translate(0, -142%);
  animation-delay: -0.75s;
}

.cg-busy-default-spinner div.bar5 {
  transform: rotate(120deg) translate(0, -142%);
  animation-delay: -0.667s;
}

.cg-busy-default-spinner div.bar6 {
  transform: rotate(150deg) translate(0, -142%);
  animation-delay: -0.5833s;
}

.cg-busy-default-spinner div.bar7 {
  transform: rotate(180deg) translate(0, -142%);
  animation-delay: -0.5s;
}

.cg-busy-default-spinner div.bar8 {
  transform: rotate(210deg) translate(0, -142%);
  animation-delay: -0.41667s;
}

.cg-busy-default-spinner div.bar9 {
  transform: rotate(240deg) translate(0, -142%);
  animation-delay: -0.333s;
}

.cg-busy-default-spinner div.bar10 {
  transform: rotate(270deg) translate(0, -142%);
  animation-delay: -0.25s;
}

.cg-busy-default-spinner div.bar11 {
  transform: rotate(300deg) translate(0, -142%);
  animation-delay: -0.1667s;
}

.cg-busy-default-spinner div.bar12 {
  transform: rotate(330deg) translate(0, -142%);
  animation-delay: -0.0833s;
}

@keyframes cg-busy-spinner-anim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.25;
  }
}