/* .spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 50%;
  border: 6px solid #f0f0f0; 
  border-top-color: #0080ff;
  animation: spinner 2.1s linear infinite;
} */

.loader-wrap, .category-loader, .payment-loader{
  position: fixed;
  width: 45px;
  height: 45px;
  top: calc(50% - 22.5px);
  left: calc(50% - 22.5px);
  z-index: 9999;
  background-color: rgba(255,255,255,0.98);  
  border-radius: 45px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.38);
          box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.38);
}

.loader-wrap.loader-large{ 
  width: 94px;
  height: 94px;
  top: calc(50% - 47px);
  left: calc(50% - 47px);
  border-radius: 94px; 
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}
.loader {
  position: absolute;
  width: 36px;
  height: 36px;
  color: #007bff; /* #0080ff; */
  font-size: 11px;
  text-indent: -99999em;
  top: calc(50% - 18px);
  left: calc(50% - 18px);
  box-shadow: inset 0 0 0 5px;
  -webkit-transform: translateZ(0); 
      -ms-transform: translateZ(0);
          transform: translateZ(0);
  z-index:100;
}
.loader:before,
.loader:after {
  position: absolute;
  content: '';
}

.loader:before {
  width: 20px; /* loader width +2px */
  height: 38px; /* loader height +2px */
  background: #fff;  
  border-radius: 38px 0 0 38px; 
  top: -1px;  
  left: -1px;   
  -webkit-transform-origin: 19px 19px; /* loader width -1px */
          transform-origin: 19px 19px; 
  -webkit-animation: spinner 1.3s infinite ease 1.0s;
          animation: spinner 1.3s infinite ease 1.0s;
}
 
.loader:after {
  width: 20px; /* loader width +2px */
  height: 38px; /* loader height +2px */
  background: #fff;
  border-radius: 0 38px 38px 0;
  top: -1px;
  left: 19px; /* loader width -1px */
  -webkit-transform-origin: 0px 19px; /* loader width -1px */
          transform-origin: 0px 19px;
  -webkit-animation: spinner 1.3s infinite ease;
          animation: spinner 1.3s infinite ease;
} 

.loader.loader-large{
  width: 78px;
  height: 78px;
  box-shadow: inset 0 0 0 9px;
  top: calc(50% - 39px);
  left: calc(50% - 39px);
}
.loader.loader-large:before,
.loader.loader-large:after{
  width: 42px;
  height: 82px;  
}
.loader.loader-large:before{
  top: -1px;  
  left: -1px; 
  -webkit-transform-origin: 41px 41px; /* loader width -1px*/
          transform-origin: 41px 41px;
}
.loader.loader-large:after{
  top: -1px;
  left: 41px;
  -webkit-transform-origin: 0px 41px; /* loader width -1px*/
          transform-origin: 0px 41px;
}

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