/* Jam Spinner: start */
.jam-spinner {
  position: absolute;
  top: calc(50% - 72px);
  left: calc(50% - 72px);
  z-index: 999;
}

.jam-spinner .circle-wrapper {
  position: relative;
  display: inline-block;
  width: 152px;
  height: 152px;
  border-radius: 152px !important;
  overflow: hidden;
}

.jam-spinner .spinning-circle {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50% !important;
  background-color: #c85016;
  background-image:
    linear-gradient(180deg, transparent 50%, #f99d28 50%),
    linear-gradient(90deg, white 50%, transparent 50%);
  animation: spinner 1s linear infinite;
}

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

.jam-spinner .jam-monkey {
  width: 145px;
  height: 145px;
  position: absolute;
  left: 4px;
  top: 4px;
}

.jam-spinner .spinner-shadow {
  position: relative;
  top: -92px;
  left: -12px;
  width: 192px;
  height: 207px;
  border-radius: 200px !important;
  opacity: .8;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.21) 0%,rgba(0,0,0,0) 65%);
  -webkit-transform: rotateX(80deg);
  transform: rotateX(80deg);
}
/* Styling for new Spinner */
.jam-spinner .spinner {
  --animation-duration: 650ms;
  --size: 75px;
  --clr1: #bbbb88;
  --clr2: #eedd99;
  --clr3: #eeaa88;
  position: relative;
  width: var(--size);
  height: var(--size);
  transform: rotate(45deg);
}
.jam-spinner .spinner .spinner-item {
  --item-size: calc(var(--size) / 2.5);
  position: absolute;
  width: var(--item-size);
  height: var(--item-size);
  top: calc(50% - var(--item-size) / 2);
  left: calc(50% - var(--item-size) / 2);
  border: 4px solid transparent;
  border-left: 4px solid var(--clr-spinner);
  border-right: 4px solid var(--clr-spinner);
  border-radius: 50%;
  animation: spinnerA var(--animation-duration) linear infinite;
}

@keyframes spinnerA {
  to {
    transform: rotate(360deg);
  }
}

.jam-spinner .spinner .spinner-item:nth-of-type(1) {
  --item-size: var(--size);
  --clr-spinner: var(--clr1);
  border-top: 4px solid var(--clr1)
}
.jam-spinner .spinner .spinner-item:nth-of-type(2) {
  --item-size: calc(var(--size) - 15px);
  --clr-spinner: var(--clr3);
  border-bottom: 4px solid var(--clr3);
}
.jam-spinner .spinner .spinner-item:nth-of-type(3) {
  --item-size: calc(var(--size) - 30px);
  --clr-spinner: var(--clr2);
  border-top: 4px solid var(--clr2);
}
/* Jam Spinner: end */