.dot{
    width:50px;
    height:50px;
    opacity: 0;
    background:red;
    border-radius:50%;
    margin: 0px !important;
    padding: 0px !important;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
    /*animation: dotting 3000ms infinite ease-in-out;*/
}

.loadingDot{
  width:10px;
  height:10px;
  background:#ffff00;
  border-radius:50%;
  margin: 0px !important;
  padding: 0px !important;
  display: inline-block;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);;
  animation: loadingDotting 2000ms infinite ease-in-out;
}

.paused{
  animation-play-state: paused;
}

.running{
  animation-play-state: running;
}

@keyframes loadingDotting {
  0% {
    transform: translateX(-100px);
    -webkit-transform: translateX(-100px);
  }
  50% {
    transform: translateX(100px);
    -webkit-transform: translateX(100px);
  }  
  100% {
    transform: translateX(-100px);
    -webkit-transform: translateX(-100px);
  }    
}  

.main-div{
    height: 100% !important;
    width:100% !important;
    display: block;
    margin: 0px !important;
    padding: 0px !important;
}

.container-div2{
    height: 100% !important;
    width: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
    display:flex; 
    align-items: center;
}