/*
/* 
Created on : 10 aug. 2022, 15:25:16
Author     : Johan van Leur <info@into-motion.com>
*/

.lds-ripple {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4rem;
  height: 4rem;
  margin-left: -2rem;
  margin-top: -2rem;
  z-index:10; 
  
}
.lds-ripple div {
  position: absolute;
  left: 0rem;
  top: 0rem;
  border: 0.25rem solid var(--primary-color);
  opacity: 0;
  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;
}

div.loader-splash {
    position:absolute;
    z-index: 99;
    left: 0rem;
    top: -3rem;
    right: 0rem;
    bottom: 0rem;
    background-color: white;
}

div.loader-splash div.logo {
    position: absolute;
    background: transparent url(../../sys/app/default-splash-logo.png) no-repeat;
    
    width: 70%;
    aspect-ratio: 1/1;
    left: 15%;
    top: 10%;        
    background-size: contain;
    background-position: center center;
    z-index: 11;
}

div.loader-splash div.logo.custom {
    
    position: absolute;
    background: transparent url(../../sys/core/splash-logo-black.svg) no-repeat;
    height: 3rem;
    width: 10rem;
    left: 50%;
    top: 50%;    
    margin-left: -5rem;
    margin-top: -5rem;
    background-size: contain;
    z-index: 11;
    
    height: 6rem;
    width: 20rem;
    left: 50%;
    
    bottom: 60%;
    top: auto;
    margin-left: -10rem;
    margin-bottom: 0rem;
    background-size: contain;
    z-index: 11;
    background-position: center center;
    
}

div.loader-splash div.powered-by-splash {
    position:absolute;
    font-size: 0.5rem;
    bottom: 1rem;    
    left: 0rem;
    right: 0rem;
    height: 1rem;
    color: #444;
    text-align: center;
    z-index: 11;
}

span.preference-time {
    color: var(--accent-text-color);
}

@keyframes lds-ripple {
  0% {
    top: 2rem;
    left: 2rem;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 2rem;
    left: 2rem;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 2rem;
    left: 2rem;
    width: 0;
    height: 0;
    opacity: 1;
  }  
  100% {
    top: 0rem;
    left: 0rem;
    width: 4rem;
    height: 4rem;
    opacity: 0;
  }
}