/*
 給載入遮蓋的物件使用
 
 載入 Loader (傳入要遮蓋的物件 ID)
 function BlockLoader(sObjID)
 取消 Loader (傳入要取消遮蓋的物件 ID)
 function ClearLoader(sObjID)
*/

.BlockTarget {
   position: relative!important;
   height: 100%;
   overflow-x: hidden;
}
.Wrap {
   box-sizing: border-box;
   margin: 0 auto;
   line-height: 6rem;
   text-align: center;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 100;
   background-color: rgba(255, 255, 255, 0.1); /*dim the background*/
}
.dark-theme .Wrap {
   background-color: rgba(0, 0, 0, 0.1); /*dim the background*/
}
.Loader {
  position: absolute;
  margin: 0 auto 3rem auto;
  overflow: hidden;
}

.Loader > div { 
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

/* ORBIT */
.Orbit {
  height: 20rem;
  width: 20rem;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  overflow: visible;
  border-radius: 50%;
  max-width: 100%;
  max-height: 100%;
}
.Orbit::before {
  position: absolute;
  top: calc(50% - 2em);
  left: calc(50% - 2em);
  display: block;
  content: 'Loading';
  z-index: -10;
  font-weight: bolder;
  color:#CCCCCC;
  font-size: xx-large;
}

.Orbit > div {
  top: 2.5rem; left: 2.5rem;
  font-size: 1rem;
  height: 15rem;
  width: 15rem;
  transform-origin: center center;
}

.Orbit > div::before {
  position: absolute;
  left: calc(50% - .5em);
  display: block;
  content: '';
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  transform: scale(1);
}

.Orbit > div:nth-child(1)::before {
  background-color: #3369E8; 
}
.Orbit > div:nth-child(2)::before {
  background-color: #D50F25;
}
.Orbit > div:nth-child(3)::before {
  background-color: #009925; 
}
.Orbit > div:nth-child(4)::before { 
  background-color: #EEB211; 
}

.Go .Loader.Orbit > div { 
  animation: Loading-Orbit 6s infinite linear;
}

.Go .Loader.Orbit > div::before { 
  animation: Loading-Orbit-Before 2s infinite ease-in-out;
}

.Loader.Orbit > div:nth-child(1) {
  animation-delay: 0s;
}
.Loader.Orbit > div:nth-child(2) {
  animation-delay: -.75s;
}
.Loader.Orbit > div:nth-child(3) {
  animation-delay: -1.5s;
}
.Loader.Orbit > div:nth-child(4) {
  animation-delay: -2.25s;
}

.Loader.Orbit > div:nth-child(1)::before {
  animation-delay: 0s;
}
.Loader.Orbit > div:nth-child(2)::before {
  animation-delay: -.5s;
}
.Loader.Orbit > div:nth-child(3)::before {
  animation-delay: -1s;
}
.Loader.Orbit > div:nth-child(4)::before {
  animation-delay: -1.5s;
}

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

@keyframes Loading-Orbit-Before {
   0% { 
    height: 1em; width: 1em;
    transform: translate3d(0,0,0);
    z-index: 5;
  }
  5%{
    height: 1.25em; width: 1.25em;
  }
  25% {
    height: 2em; width: 2em;
    z-index: 10;
  }
  50% {
    transform: translate3d(1rem,15rem,0);
    z-index: 0;
    height: 1em; width: 1em;
  }
  100% {
    transform: translate3d(0,0,0);
    z-index: 0;
    height: 1em; width: 1em;
  }
}