.rotate-loader {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  max-width: 20%;
  height: 80px;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-inline: auto;
}
.rotate-loader .ball-rotate {
  position: relative;
}
.ball-rotate,.ball-rotate>div {
  position: relative
}

.ball-rotate>div,.ball-rotate>div:after,.ball-rotate>div:before {
  background-color: #cc0000;
  width: 10px;
  height: 10px;
  border-radius: 100%
}
.ball-rotate>div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
.ball-rotate>div:first-child {
  -webkit-animation: rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;
  animation: rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite
}
@keyframes rotate {
  0% {
      -webkit-transform: rotate(0) scale(1);
      transform: rotate(0) scale(1);
  }
  50% {
      -webkit-transform: rotate(180deg) scale(.6);
      transform: rotate(180deg) scale(.6)
  }
  100% {
      -webkit-transform: rotate(360deg) scale(1);
      transform: rotate(360deg) scale(1)
  }
}
.ball-rotate>div:after,.ball-rotate>div:before {
  content: "";
  position: absolute;
  opacity: .7
}
.ball-rotate>div:before {
  top: 0;
  left: -18px
}
.ball-rotate>div:after {
  top: 0;
  left: 18px
}

html[data-browse-mode="S"] {
  .rotate-loader {
    margin-top: 30px;
    height: 120px;
  }
}