/* Fantasma do preloader aplicado ao modal do Sentinela (login). */

.sentinel-preloader-ghost #ghost {
  position: relative;
  scale: 0.8;
}

.sentinel-preloader-ghost #red {
  animation: ghostUpNDown infinite 0.5s;
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-template-areas:
    "a1  a2  a3  a4  a5  top0  top0  top0  top0  a10 a11 a12 a13 a14"
    "b1  b2  b3  top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14"
    "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14"
    "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14"
    "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14"
    "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5"
    "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18";
}

@keyframes ghostUpNDown {
  0%, 49% { transform: translateY(0); }
  50%, 100% { transform: translateY(-10px); }
}

.sentinel-preloader-ghost #top0, .sentinel-preloader-ghost #top1, .sentinel-preloader-ghost #top2, .sentinel-preloader-ghost #top3, .sentinel-preloader-ghost #top4,
.sentinel-preloader-ghost #st0, .sentinel-preloader-ghost #st1, .sentinel-preloader-ghost #st2, .sentinel-preloader-ghost #st3, .sentinel-preloader-ghost #st4, .sentinel-preloader-ghost #st5 {
  background-color: #e67e22;
}

.sentinel-preloader-ghost #top0 { grid-area: top0; }
.sentinel-preloader-ghost #top1 { grid-area: top1; }
.sentinel-preloader-ghost #top2 { grid-area: top2; }
.sentinel-preloader-ghost #top3 { grid-area: top3; }
.sentinel-preloader-ghost #top4 { grid-area: top4; }
.sentinel-preloader-ghost #st0 { grid-area: st0; }
.sentinel-preloader-ghost #st1 { grid-area: st1; }
.sentinel-preloader-ghost #st2 { grid-area: st2; }
.sentinel-preloader-ghost #st3 { grid-area: st3; }
.sentinel-preloader-ghost #st4 { grid-area: st4; }
.sentinel-preloader-ghost #st5 { grid-area: st5; }

.sentinel-preloader-ghost #an1 { grid-area: an1; animation: ghostFlicker0 infinite 0.5s; }
.sentinel-preloader-ghost #an18 { grid-area: an18; animation: ghostFlicker0 infinite 0.5s; }
.sentinel-preloader-ghost #an2 { grid-area: an2; animation: ghostFlicker1 infinite 0.5s; }
.sentinel-preloader-ghost #an17 { grid-area: an17; animation: ghostFlicker1 infinite 0.5s; }
.sentinel-preloader-ghost #an3 { grid-area: an3; animation: ghostFlicker1 infinite 0.5s; }
.sentinel-preloader-ghost #an16 { grid-area: an16; animation: ghostFlicker1 infinite 0.5s; }
.sentinel-preloader-ghost #an4 { grid-area: an4; animation: ghostFlicker1 infinite 0.5s; }
.sentinel-preloader-ghost #an15 { grid-area: an15; animation: ghostFlicker1 infinite 0.5s; }
.sentinel-preloader-ghost #an6 { grid-area: an6; animation: ghostFlicker0 infinite 0.5s; }
.sentinel-preloader-ghost #an12 { grid-area: an12; animation: ghostFlicker0 infinite 0.5s; }
.sentinel-preloader-ghost #an7 { grid-area: an7; animation: ghostFlicker0 infinite 0.5s; }
.sentinel-preloader-ghost #an13 { grid-area: an13; animation: ghostFlicker0 infinite 0.5s; }
.sentinel-preloader-ghost #an9 { grid-area: an9; animation: ghostFlicker1 infinite 0.5s; }
.sentinel-preloader-ghost #an10 { grid-area: an10; animation: ghostFlicker1 infinite 0.5s; }
.sentinel-preloader-ghost #an8 { grid-area: an8; animation: ghostFlicker0 infinite 0.5s; }
.sentinel-preloader-ghost #an11 { grid-area: an11; animation: ghostFlicker0 infinite 0.5s; }
.sentinel-preloader-ghost #an5 { grid-area: an5; }
.sentinel-preloader-ghost #an14 { grid-area: an14; }

@keyframes ghostFlicker0 {
  0%, 49% { background-color: #e67e22; }
  50%, 100% { background-color: transparent; }
}

@keyframes ghostFlicker1 {
  0%, 49% { background-color: transparent; }
  50%, 100% { background-color: #e67e22; }
}

.sentinel-preloader-ghost #eye {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 10px;
}
.sentinel-preloader-ghost #eye::before {
  content: "";
  background-color: #fff;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}
.sentinel-preloader-ghost #eye::after {
  content: "";
  background-color: #fff;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

.sentinel-preloader-ghost #eye1 {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  right: 30px;
}
.sentinel-preloader-ghost #eye1::before {
  content: "";
  background-color: #fff;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}
.sentinel-preloader-ghost #eye1::after {
  content: "";
  background-color: #fff;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

.sentinel-preloader-ghost #pupil {
  width: 20px;
  height: 20px;
  background-color: #d35400;
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 1;
  animation: ghostEyesMovement infinite 3s;
}
.sentinel-preloader-ghost #pupil1 {
  width: 20px;
  height: 20px;
  background-color: #d35400;
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 1;
  animation: ghostEyesMovement infinite 3s;
}

@keyframes ghostEyesMovement {
  0%, 49% { transform: translateX(0); }
  50%, 99% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

.sentinel-preloader-ghost #shadow {
  background-color: #e67e22;
  width: 140px;
  height: 140px;
  position: absolute;
  border-radius: 50%;
  transform: rotateX(80deg);
  filter: blur(20px);
  top: 80%;
  animation: ghostShadowMovement infinite 0.5s;
  opacity: 0.25;
}

/* No modal de esqueci a senha não queremos a sombra no chão. */
.sentinel-preloader-ghost #shadow {
  display: none;
}

@keyframes ghostShadowMovement {
  0%, 49% { opacity: 0.35; }
  50%, 100% { opacity: 0.15; }
}