/*
 * CR Servers loader (all visitors). Replaces the stock 2019 theme's three-tilted-squares
 * page loader and the hidden #preloader box with the logo's server bars
 * (crs-loader.bl002.svg). Markup: header.shared-crservers.tpl (.pageloader-*).
 * Show/hide stays with stock dist/js/main.js: the wrapper covers the page until
 * window load; on leaving a page, .pageloader-item shows after 600ms.
 * Cloudflare ignores ?v=: bump blNNN in the filename and the <link> when this changes.
 */

/* ---- Full page ----------------------------------------------------------- */

html body .pageloader-wrapper {
  background-color: rgba(247, 249, 252, 0.9);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

html body .pageloader-wrapper .pageloader-item {
  position: static;
  width: auto;
  height: auto;
  text-align: center;
}

.crs-loader__icon {
  display: block;
  width: 62px;
  height: 63px;
  margin: 0 auto;
}

/* Only for slow pages: the label fades in 2s after the item is shown
   (display:none -> block restarts the animation each time). */
.crs-loader__label {
  display: block;
  margin-top: 14px;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #707070;
  opacity: 0;
  animation: crs-loader-label 240ms ease-in 2s forwards;
}

@keyframes crs-loader-label {
  to { opacity: 1; }
}

/* ---- Section reloads ($.fn.addLoader -> #preloader) --------------------- */
/* Theme Custom CSS hides #preloader with !important (#preloader, #preloader *);
   the extra html body specificity wins over it. */

html body #preloader {
  opacity: 1 !important;
  background: rgba(247, 249, 252, 0.7) url(crs-loader.bl002.svg) no-repeat center center !important;
  background-size: 26px 27px !important;
  border-radius: 8px;
}