// === Helpers ===

.hidden {
  display: none !important;
}

.text--uppercase {
  text-transform: uppercase;
}

.required {
  left: 2px;
  font-size: 80%;
  font-weight: 600;
  color: #d41f5f;
}

.paragraph {
  margin: 0 0 20px 0;
  line-height: 22px;
}

.unload {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  position: fixed;
  z-index: 770;
}

.loadingCover {
  &::before {
    content: '';
    width: 100%;
    height: 100%;
    max-height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    position: fixed;
    z-index: 10;
    display: block;
  }
}

.waiting {
  &::before {
    content: '';
    width: 100%;
    height: 100%;
    // max-height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    position: absolute;
    z-index: 10;
    display: block;
    animation-fill-mode: both;
    animation-duration: 0.5s;
    animation-delay: 0.25s;
    animation-name: fadeIn;
  }
}

.unload,
.loading,
.waiting::before,
.loadingCover::before {
  background-size: 48px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23bcbfc1' d='M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z' transform='rotate(337.711 25 25)'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/path%3E%3C/svg%3E");
}