.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* dark overlay */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
 }
 .dot-spinner {
  position: relative;
  width: 60px;
  height: 60px;
 }
 .dot-spinner div {
  transform-origin: 30px 30px;
  animation: spin 1.2s linear infinite;
  position: absolute;
  top: 25px;
  left: 25px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;   /* white small circles */
 }
 .dot-spinner div:nth-child(1) { transform: rotate(0deg) translate(25px);  animation-delay: -1.1s; }
 .dot-spinner div:nth-child(2) { transform: rotate(45deg) translate(25px); animation-delay: -1s; }
 .dot-spinner div:nth-child(3) { transform: rotate(90deg) translate(25px); animation-delay: -0.9s; }
 .dot-spinner div:nth-child(4) { transform: rotate(135deg) translate(25px); animation-delay: -0.8s; }
 .dot-spinner div:nth-child(5) { transform: rotate(180deg) translate(25px); animation-delay: -0.7s; }
 .dot-spinner div:nth-child(6) { transform: rotate(225deg) translate(25px); animation-delay: -0.6s; }
 .dot-spinner div:nth-child(7) { transform: rotate(270deg) translate(25px); animation-delay: -0.5s; }
 .dot-spinner div:nth-child(8) { transform: rotate(315deg) translate(25px); animation-delay: -0.4s; }
 @keyframes spin {
  0%   { opacity: 1; }
  100% { opacity: 0.1; }
 }
 .loader-text {
  margin-top: 25px;
  margin-left: 70px;
  color: white;
  font-size: 18px;
  font-weight: 500;
 }
 
/* .bg {
    margin: 0px 0px 0px 0px;
    padding-bottom: 100px;
    position: fixed;
    height: 100%;
    z-index: 9999;
    width: 100%;
    clear: none;
    opacity: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bg-color{
    background-color: #f6f9fc;
  }

  .loader {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
  }

  #loader-1:before,
  #loader-1:after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 10px solid transparent;
    border-top-color: #3498db;
  }

  #loader-1:before {
    z-index: 100;
    animation: spin 1s infinite;
  }

  #loader-1:after {
    border: 10px solid #ccc;
  }

  @keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  } */