body {
  margin: 0;
}

#loading-bg {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.loading-logo {
  width: 84px;
  height: 84px;
  position: relative;
}

.logo-display-loading {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ripple-item-1 {
  position: absolute;
  border: 4.3px solid transparent;
  border-left: 4.3px solid #990099;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: rotateOpacity 1.2s ease infinite 0.2s;
  animation: rotateOpacity 1.2s ease infinite 0.2s;
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

@keyframes rotateOpacity {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 0.1;
  }
  100% {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
    opacity: 1;
  }
}

/* spinner loader */

.loading-bg {
  width: 100%;
  height: 100%;
  position: relative;
}

.loading-logo-wrapper {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
}

.loading-logo-wrapper img {
  width: 84px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 0.6px), -50%);
  z-index: 1;
}

.spinner-wrapper {
  animation: spinner-animation-custom 2000ms linear infinite;
}

.spinner-wrapper .spinner-custom {
  width: 86px;
  height: 86px;
  border: solid 4px transparent;
  /* border: solid 4px transparent; */
  /* background: rgb(95, 211, 255);
  background: radial-gradient(circle, rgba(95, 211, 255, 0.1) 0%, rgba(0, 174, 239, 0.5) 35%, rgba(203, 241, 255, 0.3) 100%); */
  /* background: rgb(95,211,255);
background: linear-gradient(90deg, rgba(95,211,255,0.5690476874343487) 0%, rgba(0,174,239,1) 35%, rgba(203,241,255,0.798739564185049) 100%);  */
  border-top-color: #990099 !important;
  /* border-left-color: #00aeef !important; */
  border-radius: 50%;
}

@keyframes spinner-animation-custom {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}