/*
 *  jquery-easy-loading - v1.3.0
 *  Easily add and manipulate loading states of any element on the page
 *  http://github.com/CarlosBonetti/jquery-loading
 *
 *  Made by Carlos Bonetti <carlosb_bc@hotmail.com>
 *  Under MIT License
 */
/* This CSS file just define some default styles and loaders */
/* You don't need to include it if you're working with your custom overlay loader element */

.loading-overlay {
  display: table;
  border-radius: 3px;
}

.loading-overlay:before{
  content: '';

  
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);


  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: block;



  }


.loading-overlay-content {
  font-weight: bold;
  text-align: center;
  display: table-cell;
  vertical-align: middle;


}

.loading-overlay.loading-theme-light {
    background-color:var(--e-global-color-primary);
  opacity:0.40;
  color: #000;

  
}

.lds-loading img{
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
}
.lds-ripple div {
  position: absolute;
  border: 3px solid var(--e-global-color-primary);
  opacity: 0.50;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 20px;
    left: 20px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 40px;
    height: 40px;
    opacity: 0;
  }
}