.loaderBackground {
	top: 0;
	position: fixed;
	background: rgba(36, 36, 36, 0.6);
	left: 0;
	right: 0;
	bottom: 0;
}
.circle{
	border-radius: 50%;
    background: transparent;
    text-align: center;
	max-width: fit-content;
	display: block;

    margin: calc((100vh - 82px) / 2) auto 0;
}

.progress-ring {
    position: fixed;
  }
  .ring1 {
    left: calc(50vw - 60px);
    top: calc(50vh - 60px);
  }
  .ring2 {
    left: calc(50vw - 50px);
    top: calc(50vh - 50px);
  }

  .ring3 {
    left: calc(50vw - 40px);
    top: calc(50vh - 40px);
  }


  @keyframes clockwiseSpin {
    from  {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
    }
 }

 @keyframes antiClockwiseSpin {
    from  {
      transform: rotate(360deg);
   }
   to {
      transform: rotate(0deg);
    }
 }

 .clockwiseSpin {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: clockwiseSpin;
    animation-timing-function: linear;
 }

 .antiClockwiseSpin {
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: antiClockwiseSpin;
    animation-timing-function: linear;
 }