.busy-container {
   opacity: 0;
   pointer-events: none;
   z-index: 998;

   transition: opacity .33s;
}

.busy-container,
.busy-container .interaction-blocker {
   height: 100%;
   left: 0;
   overflow: hidden;
   position: absolute;
   top: 0;
   width: 100%;
}

.busy-container .interaction-blocker {
   background-color: rgba(0,0,0,.2);
   display: none;
   pointer-events: all;
   z-index: 0;
}

.busy-container.show { opacity: 1; }
.busy-container.show.block-interaction .interaction-blocker { display: block }


.loader,
.loader:after {
   border-radius: 50%;
   width: 5.7em;
   height: 5.7em;
}

.loader {
   animation: busy 1.1s infinite linear;
   border-bottom-color: rgba(98,118,111,.5);
   border-left-color:   rgba(98,118,111,1);
   border-right-color:  rgba(98,118,111,.5);
   border-top-color:    rgba(98,118,111,.5);
   border-style: solid;
   border-width: 1em;
   font-size: 10px;
   left: 50%;
   margin: auto;
   position: absolute;
   text-indent: -9999em;
   top: 50%;
   transform: translateZ(0);
   transform-origin: top left;
   z-index: 1;

   -ms-transform: translateZ(0);
   -webkit-animation: busy 1.1s infinite linear;
   -webkit-transform: translateZ(0);
}

.loader-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 5em;
    height: 5em;
    border-radius: 50%;
    border: 1.1em solid #FFF;
}

@-webkit-keyframes busy {
   0% {
      transform: rotate(0deg) translate(-50%,-50%);
      -webkit-transform: rotate(0deg) translate(-50%,-50%);
   }
   100% {
      transform: rotate(360deg) translate(-50%,-50%);
      -webkit-transform: rotate(360deg) translate(-50%,-50%);
   }
}

@keyframes busy {
   0% {
      transform: rotate(0deg) translate(-50%,-50%);
      -webkit-transform: rotate(0deg) translate(-50%,-50%);
   }
   100% {
      transform: rotate(360deg) translate(-50%,-50%);
      -webkit-transform: rotate(360deg) translate(-50%,-50%);
   }
}


/* =================== *
 * ## Cancel Button ##
 * =================== */

.busy-container .cancel-button {
    position: absolute;
    top: calc(50% + 60px);
    left: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(180deg, #FFFFFF 0%,#D6D6D6 100%);
    padding: 0 10px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 1px 1px 1px 0px rgb(0 0 0 / 25%);
    height: 30px;
    line-height: 30px;
}