/* Viewport preload */

.viewport-preload {
    &:after {
        content: "Loading...";
        display: block;
        margin-top: 130px;
        text-align: center;
        font-size: 20pt;
        color: #666;
        @include animation(fadeIn 0.5s ease-in-out infinite alternate);
    }
}

@include keyframes(fadeIn) {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

.page-loading {
    position: relative;
    text-align: center;
    margin-bottom: 50px;
    color: #666;
    .progress {
        margin: 70px auto 30px auto;
    }
    .title {
        font-size: 20pt;
        margin-bottom: 10px;
    }
    .message {

    }
    .error {
      font-size: 20pt;
      margin-top: 30px;
      color: rgb(218, 36, 36);
    }


}


/* */

.cjs-loading-overlay-container {
    position: relative;
}
/* Loading overlay */

.cjs-loading-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
    z-index: 1000;
    text-align: center;
    font-size: large;
}
.cjs-loading-overlay.ui-show {
    @include transition( z-index 0.5s ease, opacity 0.3s ease);
    z-index: 1000;
}
.cjs-loading-overlay.ui-hide {
    @include transition( z-index 0.5s ease, opacity 0.3s ease);
    z-index: -1;
}
.cjs-loaded {
    z-index: 1;
}
.cjs-loading-overlay-compact {
    text-align: left;
}
.cjs-loading-overlay .error {
    color: red;
}
.cjs-loading-overlay-full .error {
    //margin-top: 270px;
}
.cjs-loading-overlay-compact .error {
    display: inline;
    text-align: left;
}
.cjs-loading-overlay .message {} .cjs-loading-overlay-full .message {} .cjs-loading-overlay-compact .message {
    display: inline;
    text-align: left;
}
.cjs-loading-overlay-compact .buttons {
    display: inline;
}
.cjs-loading-overlay button {
    margin-top: 30px;
    display: inline-block;
}
.cjs-loading-overlay-compact button {
    margin: 5px;
}

$spinnerType: "default" !default;
$spinnerColor: #000 !default;
$spinnerBgColor: #eee !default;

@if $spinnerType == "default" {

/* simple */
/* css spinner from http://lea.verou.me/2013/11/cleanest-css-spinner-ever/ */
/**
 * (C)Leanest CSS spinner ever
 */

@include keyframes(spin) {
    to {
        @include transform( rotate(1turn));
    }
}
.progress {
    position: relative;
    display: block;
    width: 5em;
    height: 5em;
    font-size: 12px;
    text-indent: 999em;
    overflow: hidden;
    @include animation(spin 1s infinite steps(8));

&.small {
    font-size: 6px;
}
&.large {
    font-size: 24px;
}

&:before, &:after, & > div:before, & > div:after {
    content: '';
    position: absolute;
    top: 0;
    left: 2.25em;
    /* (container width - part width)/2  */
    
    width: .5em;
    height: 1.5em;
    border-radius: .2em;
    background:  rgba($spinnerColor, 0.2);
    box-shadow: 0 3.5em  rgba($spinnerColor, 0.2);
    /* container height - part height */
    
    @include transform-origin( 50% 2.5em);
    /* container height / 2 */
}
&:before {
    background: $spinnerColor;
}
&:after {
    @include transform( rotate(-45deg));
    background: rgba($spinnerColor, 0.8);
}
& > div:before {
    @include transform( rotate(-90deg));
    background: rgba($spinnerColor, 0.6);
}
& > div:after {
    @include transform( rotate(-135deg));
    background:  rgba($spinnerColor, 0.4);
}

}

}

// based on https://github.com/lukehaas/css-loaders
@if $spinnerType == "load1" {
.progress {
    height: 5em;
> div {
&,
&:before,
&:after {
  background: $spinnerColor;
  @include animation(load1 1s infinite ease-in-out);
  width: 1em;
  height: 4em;
}
&:before,
&:after {
  position: absolute;
  top: 0;
  content: '';
}
&:before {
  left: -1.5em;
}
& {
  text-indent: -9999em;
  margin: 8em auto;
  position: relative;
  font-size: 11px;
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
&:after {
  left: 1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
}
}
@include keyframes (load1) {
  0%,
  80%,
  100% {
    box-shadow: 0 0 $spinnerColor;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em $spinnerColor;
    height: 5em;
  }
}

}

@if $spinnerType == "load2" {
.progress {
&,
&:before,
&:after {
  border-radius: 50%;
}
&:before,
&:after {
  position: absolute;
  content: '';
}
&:before {
  width: 5.2em;
  height: 10.2em;
  background: $spinnerBgColor;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  @include animation(load2 2s infinite ease 1.5s);
}
& {
  font-size: 11px;
  text-indent: -99999em;
  margin: 5em auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em $spinnerColor;
}
&:after {
  width: 5.2em;
  height: 10.2em;
  background: $spinnerBgColor;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  transform-origin: 0px 5.1em;
  @include animation(load2 2s infinite ease);
}
}
@include keyframes (load2) {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

}

@if $spinnerType == "load3" {
.progress {

& {
  font-size: 10px;
  margin: 5em auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: $spinnerColor;
  background: -moz-linear-gradient(left, $spinnerColor 10%, rgba($spinnerColor, 0) 42%);
  background: -webkit-linear-gradient(left, $spinnerColor 10%, rgba($spinnerColor, 0) 42%);
  background: -o-linear-gradient(left, $spinnerColor 10%, rgba($spinnerColor, 0) 42%);
  background: -ms-linear-gradient(left, $spinnerColor 10%, rgba($spinnerColor, 0) 42%);
  background: linear-gradient(to right, $spinnerColor 10%, rgba($spinnerColor, 0) 42%);
  position: relative;
  @include animation(load3 1.4s infinite linear);
}
&:before {
  width: 50%;
  height: 50%;
  background: $spinnerColor;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
&:after {
  background: $spinnerBgColor;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
}
@include keyframes (load3) {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

}

@if $spinnerType == "load4" {
.progress {
  height: 10em;
  > div {
  font-size: 20px;
  margin: 5em auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  @include animation(load4 1.3s infinite linear);
}
}
@include keyframes (load4) {
  0%,
  100% {
    box-shadow: 0em -3em 0em 0.2em $spinnerColor, 2em -2em 0 0em $spinnerColor, 3em 0em 0 -0.5em $spinnerColor, 2em 2em 0 -0.5em $spinnerColor, 0em 3em 0 -0.5em $spinnerColor, -2em 2em 0 -0.5em $spinnerColor, -3em 0em 0 -0.5em $spinnerColor, -2em -2em 0 0em $spinnerColor;
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em $spinnerColor, 2em -2em 0 0.2em $spinnerColor, 3em 0em 0 0em $spinnerColor, 2em 2em 0 -0.5em $spinnerColor, 0em 3em 0 -0.5em $spinnerColor, -2em 2em 0 -0.5em $spinnerColor, -3em 0em 0 -0.5em $spinnerColor, -2em -2em 0 -0.5em $spinnerColor;
  }
  25% {
    box-shadow: 0em -3em 0em -0.5em $spinnerColor, 2em -2em 0 0em $spinnerColor, 3em 0em 0 0.2em $spinnerColor, 2em 2em 0 0em $spinnerColor, 0em 3em 0 -0.5em $spinnerColor, -2em 2em 0 -0.5em $spinnerColor, -3em 0em 0 -0.5em $spinnerColor, -2em -2em 0 -0.5em $spinnerColor;
  }
  37.5% {
    box-shadow: 0em -3em 0em -0.5em $spinnerColor, 2em -2em 0 -0.5em $spinnerColor, 3em 0em 0 0em $spinnerColor, 2em 2em 0 0.2em $spinnerColor, 0em 3em 0 0em $spinnerColor, -2em 2em 0 -0.5em $spinnerColor, -3em 0em 0 -0.5em $spinnerColor, -2em -2em 0 -0.5em $spinnerColor;
  }
  50% {
    box-shadow: 0em -3em 0em -0.5em $spinnerColor, 2em -2em 0 -0.5em $spinnerColor, 3em 0em 0 -0.5em $spinnerColor, 2em 2em 0 0em $spinnerColor, 0em 3em 0 0.2em $spinnerColor, -2em 2em 0 0em $spinnerColor, -3em 0em 0 -0.5em $spinnerColor, -2em -2em 0 -0.5em $spinnerColor;
  }
  62.5% {
    box-shadow: 0em -3em 0em -0.5em $spinnerColor, 2em -2em 0 -0.5em $spinnerColor, 3em 0em 0 -0.5em $spinnerColor, 2em 2em 0 -0.5em $spinnerColor, 0em 3em 0 0em $spinnerColor, -2em 2em 0 0.2em $spinnerColor, -3em 0em 0 0em $spinnerColor, -2em -2em 0 -0.5em $spinnerColor;
  }
  75% {
    box-shadow: 0em -3em 0em -0.5em $spinnerColor, 2em -2em 0 -0.5em $spinnerColor, 3em 0em 0 -0.5em $spinnerColor, 2em 2em 0 -0.5em $spinnerColor, 0em 3em 0 -0.5em $spinnerColor, -2em 2em 0 0em $spinnerColor, -3em 0em 0 0.2em $spinnerColor, -2em -2em 0 0em $spinnerColor;
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em $spinnerColor, 2em -2em 0 -0.5em $spinnerColor, 3em 0em 0 -0.5em $spinnerColor, 2em 2em 0 -0.5em $spinnerColor, 0em 3em 0 -0.5em $spinnerColor, -2em 2em 0 0em $spinnerColor, -3em 0em 0 0em $spinnerColor, -2em -2em 0 0.2em $spinnerColor;
  }
}

}

@if $spinnerType == "load5" {
.progress {
    > div {
  margin: 4em auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  @include animation(load5 1.1s infinite ease);
}
}
@include keyframes (load5) {

  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em $spinnerColor, 1.8em -1.8em 0 0em rgba($spinnerColor, 0.2), 2.5em 0em 0 0em rgba($spinnerColor, 0.2), 1.75em 1.75em 0 0em rgba($spinnerColor, 0.2), 0em 2.5em 0 0em rgba($spinnerColor, 0.2), -1.8em 1.8em 0 0em rgba($spinnerColor, 0.2), -2.6em 0em 0 0em rgba($spinnerColor, 0.5), -1.8em -1.8em 0 0em rgba($spinnerColor, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba($spinnerColor, 0.7), 1.8em -1.8em 0 0em $spinnerColor, 2.5em 0em 0 0em rgba($spinnerColor, 0.2), 1.75em 1.75em 0 0em rgba($spinnerColor, 0.2), 0em 2.5em 0 0em rgba($spinnerColor, 0.2), -1.8em 1.8em 0 0em rgba($spinnerColor, 0.2), -2.6em 0em 0 0em rgba($spinnerColor, 0.2), -1.8em -1.8em 0 0em rgba($spinnerColor, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba($spinnerColor, 0.5), 1.8em -1.8em 0 0em rgba($spinnerColor, 0.7), 2.5em 0em 0 0em $spinnerColor, 1.75em 1.75em 0 0em rgba($spinnerColor, 0.2), 0em 2.5em 0 0em rgba($spinnerColor, 0.2), -1.8em 1.8em 0 0em rgba($spinnerColor, 0.2), -2.6em 0em 0 0em rgba($spinnerColor, 0.2), -1.8em -1.8em 0 0em rgba($spinnerColor, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba($spinnerColor, 0.2), 1.8em -1.8em 0 0em rgba($spinnerColor, 0.5), 2.5em 0em 0 0em rgba($spinnerColor, 0.7), 1.75em 1.75em 0 0em rgba($spinnerColor, 0.2), 0em 2.5em 0 0em rgba($spinnerColor, 0.2), -1.8em 1.8em 0 0em rgba($spinnerColor, 0.2), -2.6em 0em 0 0em rgba($spinnerColor, 0.2), -1.8em -1.8em 0 0em rgba($spinnerColor, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba($spinnerColor, 0.2), 1.8em -1.8em 0 0em rgba($spinnerColor, 0.2), 2.5em 0em 0 0em rgba($spinnerColor, 0.5), 1.75em 1.75em 0 0em rgba($spinnerColor, 0.7), 0em 2.5em 0 0em $spinnerColor, -1.8em 1.8em 0 0em rgba($spinnerColor, 0.2), -2.6em 0em 0 0em rgba($spinnerColor, 0.2), -1.8em -1.8em 0 0em rgba($spinnerColor, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba($spinnerColor, 0.2), 1.8em -1.8em 0 0em rgba($spinnerColor, 0.2), 2.5em 0em 0 0em rgba($spinnerColor, 0.2), 1.75em 1.75em 0 0em rgba($spinnerColor, 0.5), 0em 2.5em 0 0em rgba($spinnerColor, 0.7), -1.8em 1.8em 0 0em $spinnerColor, -2.6em 0em 0 0em rgba($spinnerColor, 0.2), -1.8em -1.8em 0 0em rgba($spinnerColor, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba($spinnerColor, 0.2), 1.8em -1.8em 0 0em rgba($spinnerColor, 0.2), 2.5em 0em 0 0em rgba($spinnerColor, 0.2), 1.75em 1.75em 0 0em rgba($spinnerColor, 0.2), 0em 2.5em 0 0em rgba($spinnerColor, 0.5), -1.8em 1.8em 0 0em rgba($spinnerColor, 0.7), -2.6em 0em 0 0em $spinnerColor, -1.8em -1.8em 0 0em rgba($spinnerColor, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba($spinnerColor, 0.2), 1.8em -1.8em 0 0em rgba($spinnerColor, 0.2), 2.5em 0em 0 0em rgba($spinnerColor, 0.2), 1.75em 1.75em 0 0em rgba($spinnerColor, 0.2), 0em 2.5em 0 0em rgba($spinnerColor, 0.2), -1.8em 1.8em 0 0em rgba($spinnerColor, 0.5), -2.6em 0em 0 0em rgba($spinnerColor, 0.7), -1.8em -1.8em 0 0em $spinnerColor;
  }
}

}

@if $spinnerType == "load6" {
.progress {
    > div {
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 0.8em auto;
  position: relative;
  @include animation(load6 1.7s infinite ease);
}
}
@include keyframes (load6) {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: -0.11em -0.83em 0 -0.4em $spinnerColor, -0.11em -0.83em 0 -0.42em $spinnerColor, -0.11em -0.83em 0 -0.44em $spinnerColor, -0.11em -0.83em 0 -0.46em $spinnerColor, -0.11em -0.83em 0 -0.477em $spinnerColor;
  }
  5%,
  95% {
    box-shadow: -0.11em -0.83em 0 -0.4em $spinnerColor, -0.11em -0.83em 0 -0.42em $spinnerColor, -0.11em -0.83em 0 -0.44em $spinnerColor, -0.11em -0.83em 0 -0.46em $spinnerColor, -0.11em -0.83em 0 -0.477em $spinnerColor;
  }
  30% {
    box-shadow: -0.11em -0.83em 0 -0.4em $spinnerColor, -0.51em -0.66em 0 -0.42em $spinnerColor, -0.75em -0.36em 0 -0.44em $spinnerColor, -0.83em -0.03em 0 -0.46em $spinnerColor, -0.81em 0.21em 0 -0.477em $spinnerColor;
  }
  55% {
    box-shadow: -0.11em -0.83em 0 -0.4em $spinnerColor, -0.29em -0.78em 0 -0.42em $spinnerColor, -0.43em -0.72em 0 -0.44em $spinnerColor, -0.52em -0.65em 0 -0.46em $spinnerColor, -0.57em -0.61em 0 -0.477em $spinnerColor;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: -0.11em -0.83em 0 -0.4em $spinnerColor, -0.11em -0.83em 0 -0.42em $spinnerColor, -0.11em -0.83em 0 -0.44em $spinnerColor, -0.11em -0.83em 0 -0.46em $spinnerColor, -0.11em -0.83em 0 -0.477em $spinnerColor;
  }
}

}

@if $spinnerType == "load7" {
.progress {
> div {
&:before,
&:after,
& {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  @include animation(load7 1.8s infinite ease-in-out)
}
& {
  margin: 8em auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  -webkit-animation-delay: 0.16s;
  animation-delay: 0.16s;
}
&:before {
  left: -3.5em;
}
&:after {
  left: 3.5em;
  @include animation-delay (0.32s);
}
&:before,
&:after {
  content: '';
  position: absolute;
  top: 0;
}
}
}
@include keyframes (load7) {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em $spinnerColor;
  }
  40% {
    box-shadow: 0 2.5em 0 0 $spinnerColor;
  }
}

}

@if $spinnerType == "load8" {

.progress {
  margin: 6em auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba($spinnerColor, 0.2);
  border-right: 1.1em solid rgba($spinnerColor, 0.2);
  border-bottom: 1.1em solid rgba($spinnerColor, 0.2);
  border-left: 1.1em solid $spinnerColor;
  @include animation(load8 1.1s infinite linear);

&,
&:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
}
@include keyframes (load8) {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

}