@import 'variables.css';




/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: var(--bs-primary);
    animation: l15 1s infinite linear;
  }
  .loader::before,
  .loader::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: l15 2s infinite;
  }
  .loader::after {
    margin: 8px;
    animation-duration: 3s;
  }
  @keyframes l15{ 
    100%{transform: rotate(1turn)}
  }



  

  #loadingScreen {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);
  }

  #loadingScreen .loader_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .loader_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  

  #loadingScreen .loader {
    width: 100px;
  }





/* skeleton css */
  .skeleton {
    /* padding:15px; */
    /* max-width: 300px; */
    width: 100%;
    background: #fff;
    border-radius: 5px;
    /* align-items: center; */
    /* box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12); */
}
.skeleton .square {
    height: 80px;
    border-radius: 5px;
    background: rgba(130, 130, 130, 0.2);
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
    background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
    background-size: 800px 100px;
    animation: wave-squares 2s infinite ease-out;
}
.skeleton .line {
    height: 12px;
    margin-bottom:6px;
    border-radius: 2px;
    background: rgba(130, 130, 130, 0.2);
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
    background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
    background-size: 800px 100px;
    animation: wave-lines 2s infinite ease-out;
}
.skeleton-right{
   flex:1;
}
.skeleton-left{
   flex:2;
   padding-right:15px;
}
.flex1{
   flex: 1;
}
.flex2{
   flex: 2;
}
.skeleton .line:last-child{
   margin-bottom: 0;
}
.h8{
   height: 8px !important;
}
.h10{
   height: 10px !important;
}
.h12{
   height: 12px !important;
}
.h15{
   height: 15px !important;
}
.h17{
   height: 17px !important;
}
.h20{
   height: 20px !important;
}
.h25{
   height: 25px !important;
}
.w25{
   width: 25% !important
}
.w40{
   width:40% !important;
}
.w50{
   width: 50% !important
}
.w75{
   width: 75% !important
}
.m10{
   margin-bottom: 10px !important;
}
.circle{
   border-radius: 50% !important;
    height: 80px !important;
    width: 80px;
}
@keyframes wave-lines {
   0% {
       background-position: -468px 0;
   }
    100% {
       background-position: 468px 0;
   }
}
@keyframes wave-squares {
   0% {
       background-position: -468px 0;
   }
    100% {
       background-position: 468px 0;
   }
}

/* skeleton css */