#page_overlay {
  position: fixed;
  z-index: 1050;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f9fa; }

.pace {
  pointer-events: none;
  user-select: none;
  transition: visibility .2s;
  display: contents;
  position: absolute; }
  .pace .pace-progress {
    background: #3c8dbc;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px; }
  .pace .pace-activity {
    position: fixed;
    z-index: 1051;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #f8f9fa; }
    .pace .pace-activity:after {
      display: block;
      content: "";
      position: fixed;
      z-index: 9999;
      top: 50%;
      right: 50%;
      margin-top: -20px;
      margin-right: -20px;
      width: 40px;
      height: 40px;
      border: solid 2px #f8f9fa;
      border-top-color: #3c8dbc;
      border-left-color: #3c8dbc;
      border-radius: 50%;
      animation: pace-spinner .4s linear infinite; }
  .pace .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #fff, 0 0 5px #fff;
    opacity: 1.0;
    transform: rotate(3deg) translate(0px, -4px); }

.pace-inactive {
  visibility: hidden; }
  .pace-inactive .pace-activity {
    transform: scale(0);
    opacity: 0;
    transition: opacity .1s 0s linear, transform 0s .1s linear;
    /*&:after {
            border-color: $primary;
            animation: pace-done .1s forwards;
        }*/ }

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

/*@keyframes pace-done {
    100% {
        transform: scale(0);
    }
}*/