.ember-notify-default.ember-notify-cn {
  position: fixed;
  z-index: 5000;
  bottom: 0px;
  right: 0px;
}

.ember-notify-default .ember-notify {
  display: block;
  margin: 10px;
  position: relative;
  width: 300px;
  /* the following is purely so that it doesn't look broken without Foundation installed */
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 10px;
}

.ember-notify-default .ember-notify-show {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-name: ember-notify-show;
  animation-name: ember-notify-show;
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.ember-notify-default .ember-notify-hide {
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
  -webkit-animation-name: ember-notify-hide;
  animation-name: ember-notify-hide;
  -webkit-animation-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
  animation-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
}

.ember-notify-hide:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused; 
  animation-play-state: paused;
}

@-webkit-keyframes ember-notify-show {
  from {
    right: -310px;
  }
  to {
    right: 0;
  }
}

@keyframes ember-notify-show {
  from {
    right: -310px;
  }
  to {
    right: 0;
  }
}
@-webkit-keyframes ember-notify-hide {
  from {
    right: 0;
  }
  to {
    right: -310px;
  }
}
@keyframes ember-notify-hide {
  from {
    right: 0;
  }
  to {
    right: -310px;
  }
}

.ember-notify-default .ember-notify .close {
  float: right;
  cursor: pointer;
}


@media only screen and (max-width: 680px) {
  .ember-notify-default.ember-notify-cn {
    width: 100%;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .ember-notify-default .ember-notify {
    width: 100%;
    float: right;
  }
}

.ember-notify-cn .clearfix {
  *zoom: 1;
}
.ember-notify-cn .clearfix:before,
.ember-notify-cn .clearfix:after {
  content: " ";
  display: table;
}
.ember-notify-cn .clearfix:after {
  clear: both;
}

@import 'button.css';
@import 'loader.css';

:root  {
    --disabled-button-bg: #999;
}

.loading-button {
 position:relative
}
.loading-button .loading-spinner {
 position:absolute;
 z-index:2;
 display:inline-block;
 top: 1em;
 margin-top:0;
 opacity:0;
 pointer-events:none
}
.loading-button .loading-label {
 position:relative;
 z-index:3
}
.loading-button .loading-progress {
 position:absolute;
 width:0;
 height:100%;
 left:0;
 top:0;
 background:rgba(0,0,0,0.2);
 visibility:hidden;
 opacity:0;
 transition:0.1s linear all !important
}
.loading-button[data-loading] .loading-progress {
 opacity:1;
 visibility:visible
}
.loading-button,.loading-button .loading-spinner,.loading-button .loading-label {
 transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important
}
.loading-button[data-style=zoom-in],
.loading-button[data-style=zoom-in] .loading-spinner,
.loading-button[data-style=zoom-in] .loading-label,
.loading-button[data-style=zoom-out],
.loading-button[data-style=zoom-out] .loading-spinner,
.loading-button[data-style=zoom-out] .loading-label {
 transition:0.3s ease all !important
}
.loading-button[data-style=expand-right] .loading-spinner {
    right:10%;
}
.loading-button[data-style=expand-right][data-size="s"] .loading-spinner,.loading-button[data-style=expand-right][data-size="xs"] .loading-spinner {
 right:-12px
}
.loading-button[data-style=expand-right][data-loading] {
 padding-right:56px
}
.loading-button[data-style=expand-right][data-loading] .loading-spinner {
 opacity:1
}
.loading-button[data-style=expand-right][data-loading][data-size="s"],.loading-button[data-style=expand-right][data-loading][data-size="xs"] {
 padding-right:40px
}
.loading-button[data-style=expand-left] .loading-spinner {
    left: 10%;
}
.loading-button[data-style=expand-left][data-size="s"] .loading-spinner,.loading-button[data-style=expand-left][data-size="xs"] .loading-spinner {
 left:4px
}
.loading-button[data-style=expand-left][data-loading] {
 padding-left:56px
}
.loading-button[data-style=expand-left][data-loading] .loading-spinner {
 opacity:1
}
.loading-button[data-style=expand-left][data-loading][data-size="s"],.loading-button[data-style=expand-left][data-loading][data-size="xs"] {
 padding-left:40px
}
.loading-button[data-style=expand-up] {
 overflow:hidden
}
.loading-button[data-style=expand-up] .loading-spinner {
 top: -20%;
 left:35%;
 margin-left:0
}
.loading-button[data-style=expand-up][data-loading] {
 padding-top:54px
}
.loading-button[data-style=expand-up][data-loading] .loading-spinner {
 opacity:1;
 top: 20%;
 margin-top:0
}
.loading-button[data-style=expand-up][data-loading][data-size="s"],.loading-button[data-style=expand-up][data-loading][data-size="xs"] {
 padding-top:32px
}
.loading-button[data-style=expand-up][data-loading][data-size="s"] .loading-spinner,.loading-button[data-style=expand-up][data-loading][data-size="xs"] .loading-spinner {
 top:4px
}
.loading-button[data-style=expand-down] {
 overflow:hidden
}
.loading-button[data-style=expand-down] .loading-spinner {
 top: 50%;
 left:35%;
 margin-left:0
}
.loading-button[data-style=expand-down][data-size="s"] .loading-spinner,.loading-button[data-style=expand-down][data-size="xs"] .loading-spinner {
 top:40px
}
.loading-button[data-style=expand-down][data-loading] {
 padding-bottom:54px
}
.loading-button[data-style=expand-down][data-loading] .loading-spinner {
 opacity:1
}
.loading-button[data-style=expand-down][data-loading][data-size="s"],.loading-button[data-style=expand-down][data-loading][data-size="xs"] {
 padding-bottom:32px
}
.loading-button[data-style=slide-left] {
 overflow:hidden
}
.loading-button[data-style=slide-left] .loading-label {
 position:relative
}
.loading-button[data-style=slide-left] .loading-spinner {
 left:100%;
 margin-left:0
}
.loading-button[data-style=slide-left][data-loading] .loading-label {
 opacity:0;
 left:-100%
}
.loading-button[data-style=slide-left][data-loading] .loading-spinner {
 opacity:1;
 left:50%
}
.loading-button[data-style=slide-right] {
 overflow:hidden
}
.loading-button[data-style=slide-right] .loading-label {
 position:relative
}
.loading-button[data-style=slide-right] .loading-spinner {
 right:100%;
 margin-left:0;
 left:16px
}
.loading-button[data-style=slide-right][data-loading] .loading-label {
 opacity:0;
 left:100%
}
.loading-button[data-style=slide-right][data-loading] .loading-spinner {
 opacity:1;
 left:50%
}
.loading-button[data-style=slide-up] {
 overflow:hidden
}
.loading-button[data-style=slide-up] .loading-label {
 position:relative
}
.loading-button[data-style=slide-up] .loading-spinner {
 left:50%;
 margin-left:0;
 margin-top:1em
}
.loading-button[data-style=slide-up][data-loading] .loading-label {
 opacity:0;
 top:-1em
}
.loading-button[data-style=slide-up][data-loading] .loading-spinner {
 opacity:1;
 margin-top:0
}
.loading-button[data-style=slide-down] {
 overflow:hidden
}
.loading-button[data-style=slide-down] .loading-label {
 position:relative
}
.loading-button[data-style=slide-down] .loading-spinner {
 left:35%;
 margin-left:0;
 margin-top:-2em
}
.loading-button[data-style=slide-down][data-loading] .loading-label {
 opacity:0;
 top:1em
}
.loading-button[data-style=slide-down][data-loading] .loading-spinner {
 opacity:1;
 margin-top:0
}
.loading-button[data-style=zoom-out] {
 overflow:hidden
}
.loading-button[data-style=zoom-out] .loading-spinner {
 left:50%;
 margin-left:32px;
 transform:scale(2.5)
}
.loading-button[data-style=zoom-out] .loading-label {
 position:relative;
 display:inline-block
}
.loading-button[data-style=zoom-out][data-loading] .loading-label {
 opacity:0;
 transform:scale(0.5)
}
.loading-button[data-style=zoom-out][data-loading] .loading-spinner {
 opacity:1;
 margin-left:0;
 transform:none
}

/* zoom-in */
.loading-button[data-style=zoom-in] {
 overflow:hidden
}
.loading-button[data-style=zoom-in] .loading-spinner {
 left:50%;
 margin-left:-16px;
 transform:scale(0.2)
}
.loading-button[data-style=zoom-in] .loading-label {
 position:relative;
 display:inline-block
}
.loading-button[data-style=zoom-in][data-loading] .loading-label {
 opacity:0;
 transform:scale(2.2)
}
.loading-button[data-style=zoom-in][data-loading] .loading-spinner {
 opacity:1;
 margin-left:0;
 transform:none
}

/* contract */
.loading-button[data-style=contract] {
 overflow:hidden;
 width:100px
}
.loading-button[data-style=contract] .loading-spinner {
 left:.75em;
 margin-left:0;
 top: .5em;
}
.loading-button[data-style=contract][data-loading] {
 border-radius:50%;
 width:52px
}
.loading-button[data-style=contract][data-loading] .loading-label {
 opacity:0
}
.loading-button[data-style=contract][data-loading] .loading-spinner {
 opacity:1
}

/* contract-overlay */

.loading-button[data-style=contract-overlay] {
 overflow:hidden;
 width:100px;
 box-shadow:0px 0px 0px 2000px transparent
}
.loading-button[data-style=contract-overlay] .loading-spinner {
 left:50%;
 margin-left:0
}
.loading-button[data-style=contract-overlay][data-loading] {
 border-radius:50%;
 width:52px;
 box-shadow:0px 0px 0px 2000px rgba(0,0,0,0.8)
}
.loading-button[data-style=contract-overlay][data-loading] .loading-label {
 opacity:0
}
.loading-button[data-style=contract-overlay][data-loading] .loading-spinner {
 opacity:1
}
.loading-button {
 background:#666;
 border:0;
 padding:14px 18px;
 font-size:18px;
 cursor:pointer;
 color:#fff;
 border-radius:2px;
 border:1px solid transparent;
 -webkit-appearance:none;
 -webkit-font-smoothing:antialiased;
 -webkit-tap-highlight-color:transparent
}
.loading-button:hover {
 border-color:rgba(0,0,0,0.07);
 background-color:#888
}
.loading-button[data-color=green] {
 background:#2aca76
}
.loading-button[data-color=green]:hover {
 background-color:#38d683
}
.loading-button[data-color=blue] {
 background:#53b5e6
}
.loading-button[data-color=blue]:hover {
 background-color:#69bfe9
}
.loading-button[data-color=red] {
 background:#ea8557
}
.loading-button[data-color=red]:hover {
 background-color:#ed956e
}
.loading-button[data-color=purple] {
 background:#9973C2
}
.loading-button[data-color=purple]:hover {
 background-color:#a685ca
}
.loading-button[data-color=mint] {
 background:#16a085
}
.loading-button[data-color=mint]:hover {
 background-color:#19b698
}
.loading-button[disabled],.loading-button[data-loading] {
 border-color:rgba(0,0,0,0.07)
}
.loading-button[disabled],
.loading-button[disabled]:hover,
.loading-button[data-loading],
.loading-button[data-loading]:hover {
 cursor:default;
 background-color:var(--disabled-button-bg)
}
.loading-button[data-size=xs] {
 padding:4px 8px
}
.loading-button[data-size=xs] .loading-label {
 font-size:0.7em
}
.loading-button[data-size=s] {
 padding:6px 10px
}
.loading-button[data-size=s] .loading-label {
 font-size:0.9em
}
.loading-button[data-size=l] .loading-label {
 font-size:1.2em
}
.loading-button[data-size=xl] .loading-label {
 font-size:1.5em
}


.ember-hold-button {
  position: relative;
  outline: none;
  border-width: 0;
  font-size: 1em;
  background: transparent;
}

.ember-hold-button span {
  -webkit-transition-duration: inherit;
          transition-duration: inherit;
  -webkit-animation-duration: inherit;
          animation-duration: inherit;
}

/* Circle */

.ember-hold-button.circle {
  border-radius: 50%;
  border: 2px solid #6ba9f3;
  height: 50px;
  width: 50px;
  background: transparent;
  padding: 0;
}

.ember-hold-button.circle span {
  font-size: 0;
  background-color: #6ba9f3;
  border-radius: 50%;
  display: block;
  height: 100%;
  -webkit-transform: scale(0.2);
      -ms-transform: scale(0.2);
          transform: scale(0.2);
  -webkit-transition-property: -webkit-transform;
          transition-property: transform;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  width: 100%;
}

.ember-hold-button.circle.is-holding span {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.ember-hold-button.circle.is-complete span {
  -webkit-transition: none;
          transition: none;
}

/* Rectangle */
.ember-hold-button.rectangle {
  border-radius: 2px;
  height: 40px;
  line-height: 40px;
  min-width: 100px;
  text-align: center;
  color: white;
  background: #6ba9f3;
  padding: 0 10px;
}

.ember-hold-button.rectangle span {
  bottom: 0;
  height: 4px;
  left: 0;
  position: absolute;
  -webkit-transition-property: width;
          transition-property: width;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  width: 0;
  background-color: #003b80;
}

.ember-hold-button.rectangle.is-holding span {
  width: 100%
}

.ember-hold-button.rectangle.is-complete span {
  -webkit-transition: none;
          transition: none;
}

/* Border Circle */
.ember-hold-button.border-circle {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  background: transparent;
  border: 5px solid red;
}

.ember-hold-button.border-circle span {
  display: none;
}

.ember-hold-button.border-circle.is-holding {
  -webkit-animation-name: border-progress;
          animation-name: border-progress;
  -webkit-animation-duration: inherit;
          animation-duration: inherit;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
}

@-webkit-keyframes border-progress {
  25% {
    border-top-color: transparent;
  }
  50% {
    border-top-color: transparent;
    border-right-color: transparent;
  }
  75% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
  }
  100% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}

@keyframes border-progress {
  25% {
    border-top-color: transparent;
  }
  50% {
    border-top-color: transparent;
    border-right-color: transparent;
  }
  75% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
  }
  100% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}

:root {
    --loader-color: #ffffff;
}
.loader-circular-dots-fade {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    transform: translateZ(0) scale(.25);
    animation: circular-dots-fade 1.1s infinite ease;
}

@keyframes circular-dots-fade {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em var(--loader-color), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em var(--loader-color), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em var(--loader-color), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em var(--loader-color), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em var(--loader-color), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em var(--loader-color), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em var(--loader-color), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em var(--loader-color);
  }
}


.loader-bars,
.loader-bars:before,
.loader-bars:after {
    background: var(--loader-color);
    animation: loader-bars 1s infinite ease-in-out;
    width: 1em;
    height: 1em;
}
.loader-bars {
    color: var(--loader-color);
    text-indent: -9999em;
    position: relative;
    font-size: .25em;
    transform: translateZ(0);
    animation-delay: -0.16s;
}
.loader-bars:before,
.loader-bars:after {
    position: absolute;
    top: 0;
    content: '';
}
.loader-bars:before {
    left: -1.5em;
    animation-delay: -0.32s;
}
.loader-bars:after {
    left: 1.5em;
}

@keyframes loader-bars {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

/*
  LOADER - rotating-slice
-------------------------
*/
:root {
    --rotating-slice-width: 5.2em;
    --rotating-slice-height: 10.2em;
}

.loader-rotating-slice,
.loader-rotating-slice:before,
.loader-rotating-slice:after {
  border-radius: 50%;
}
.loader-rotating-slice {
  color: var(--loader-color);
  font-size: 3px;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  transform: translateZ(0);
}
.loader-rotating-slice:before,
.loader-rotating-slice:after {
  position: absolute;
  content: '';
}
.loader-rotating-slice:before {
  width: var(--rotating-slice-width);
  height: var(--rotating-slice-height);
  background: var(--disabled-button-bg);
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  transform-origin: 5.2em 5.1em;
  animation: rotating-slice 2s infinite ease 1.5s;
}
.loader-rotating-slice:after {
  width: var(--rotating-slice-width);
  height: var(--rotating-slice-height);
  background: var(--disabled-button-bg);
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  transform-origin: 0px 5.1em;
  animation: rotating-slice 2s infinite ease;
}

@keyframes rotating-slice {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



/*
  LOADER - fading-circle
------------------------
*/

.loader-fading-circle {
  text-indent: -9999em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--loader-color);
  background: linear-gradient(to right, var(--loader-color) 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  animation: fading-circle 1.4s infinite linear;
  transform: translateZ(0);
}
.loader-fading-circle:before {
  width: 50%;
  height: 50%;
  background: var(--loader-color);
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader-fading-circle:after {
  background: var(--disabled-button-bg); 
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

@keyframes fading-circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*
  LOADER - SCALING CIRCLES
--------------------------
*/

.loader-scaling-circles {
  color: var(--loader-color);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  animation: scaling-circles 1.3s infinite linear;
  transform: translateZ(0) scale(.25);
}

@keyframes scaling-circles {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

/*
  LOADER - TRAILING DOTS
------------------------


*/

.loader-trailing-dots {
  color: var(--loader-color);
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  transform: translateZ(0);
  animation: trailing-dots 1.7s infinite ease, round 1.7s infinite ease;
}

@keyframes trailing-dots {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}

@keyframes round {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*
  LOADER - HORIZONTAL DOTS
--------------------------
*/
.loader-horizontal-dots,
.loader-horizontal-dots:before,
.loader-horizontal-dots:after {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation-fill-mode: both;
  animation: horizontal-dots 1.8s infinite ease-in-out;
}
.loader-horizontal-dots {
  color: #ffffff;
  font-size: .5em;
  position: relative;
  transform: translateZ(0);
  animation-delay: -0.16s;
  top: -2.5em;
  left: 1.5em;
}
.loader-horizontal-dots:before,
.loader-horizontal-dots:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader-horizontal-dots:before {
  left: -1.5em;
  animation-delay: -0.32s;
}
.loader-horizontal-dots:after {
  left: 1.5em;
}

@keyframes horizontal-dots {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/*
  LOADER - CIRCLE SLICE
-----------------------
*/
.loader-circle-slice,
.loader-circle-slice:after {
    border-radius: 50%;
    width: 1em;
    height: 1em;
}
.loader-circle-slice {
    position: relative;
    border-top: .25em solid rgba(255, 255, 255, 0.2);
    border-right: .25em solid rgba(255, 255, 255, 0.2);
    border-bottom: .25em solid rgba(255, 255, 255, 0.2);
    border-left: .25em solid var(--loader-color);
    transform: translateZ(0);
    animation: circle-slice 1.1s infinite linear;
}

@keyframes circle-slice {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}