@import "_fonts";

.jlLoader{
  .lds-grid {
    display: block;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-grid div {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #100043;
    animation: lds-grid 1.2s linear infinite;
  }
  .lds-grid div:nth-child(1) {
    top: 8px;
    left: 8px;
    animation-delay: 0s;
  }
  .lds-grid div:nth-child(2) {
    top: 8px;
    left: 32px;
    animation-delay: -0.4s;
  }
  .lds-grid div:nth-child(3) {
    top: 8px;
    left: 56px;
    animation-delay: -0.8s;
  }
  .lds-grid div:nth-child(4) {
    top: 32px;
    left: 8px;
    animation-delay: -0.4s;
  }
  .lds-grid div:nth-child(5) {
    top: 32px;
    left: 32px;
    animation-delay: -0.8s;
  }
  .lds-grid div:nth-child(6) {
    top: 32px;
    left: 56px;
    animation-delay: -1.2s;
  }
  .lds-grid div:nth-child(7) {
    top: 56px;
    left: 8px;
    animation-delay: -0.8s;
  }
  .lds-grid div:nth-child(8) {
    top: 56px;
    left: 32px;
    animation-delay: -1.2s;
  }
  .lds-grid div:nth-child(9) {
    top: 56px;
    left: 56px;
    animation-delay: -1.6s;
  }
}

#jlPageLoader{
  position:fixed;
  top:0px;
  left:-100%;
  width:100%;
  height:100vh;
  justify-content: center;
  align-items:center;
  z-index:999999999999;
  background:rgba(255,255,255,0.8);

  //background:linear-gradient(to bottom right,#267cf0,#7a3fd8);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);

  display:flex;
  transition:opacity 0.3s ease-in-out;
  opacity:0;

  .jlLoader{
    .lds-grid div {
//      background:#fff;
    }
  }

  &.show{
    left:0px;
    opacity:1;

  }

}

.jlBlockLoader{
  padding-top:100px;
  padding-bottom:100px;
  display:block;
  width:fit-content;
  width:-webkit-fit-content;   width:-moz-fit-content;
  margin-left:auto;
  margin-right:auto;


  &.inBlock{
    position:absolute;
    height:100%;
  }



  .jlBlockLoaderHolder{
    display:inline-block;
    text-align:center;
  }
}

#jlPageLoaderHolder{
  display:inline-block;
}

.jlPageLoaderText
{
  font-size:24px;
  text-align:center;
  line-height:1.3em;
  display:block;
  font-family:$accentFont;
  font-weight:bold;

}
@keyframes lds-grid {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}