

#theLoadingOverlay
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  animation: fadeInLoadingOverlay 800ms ease-in-out;
  background: rgba(0,0,0,0.4);
  &.esLoadingSlow
    background: rgba(0, 0, 0, 0.5);

#theLoadingOverlay .icon-loading
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  color: white;
  font-size: 60px;
  line-height: 60px;
  animation: rotateLoadingIcon 2s linear infinite;

#theServerJustStarted
  position: fixed;
  top: 70px;
  left: calc(50% - 250px);
  padding: 20px 18px 10px;
  max-width: 500px;
  font-weight: bold;
  text-align: center;
  // Z-order above the spinner.
  background: black;
  z-index: 1;
  p
    color: white;
    font-size: 20px;
    line-height: 32px;

@keyframes fadeInLoadingOverlay
  from
    opacity: 0.0;
  to
    opacity: 1;


@keyframes rotateLoadingIcon
  from
    transform:rotate(0deg);
  to
    transform:rotate(360deg);

