.test-class{
    background-color: aqua;
    color: yellow;
}

.not-visible{
    display: none;
}
.spinner-visible{
    display: block;
}
.boxSpinner{
    height: 500px;
    width:500px;
    background-color: blue;

}

.backgroundModal{
    background: var(--bg);
    color: var(--fg);
    display: grid;
    font: 1em/1.5 sans-serif;
    place-items: center;
    border: 1px solid transparent;
}

.styleModal{
    border-style: none;
    box-shadow: 10px 10px 5px 5px transparent;
}



.fa-spin {
  animation: fa-spin 1s linear infinite !important;
}


/* SPINNER RELOJ */

/* .pl {
position: relative;
width: 12em;
height: 12em;
}
.pl__dot {
background: currentColor;
position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.25em);
width: 0.5em;
height: 0.5em;
transform-origin: 50% 100%;
}
.pl__dot:nth-child(1) {
animation: dot1 8s linear infinite;
transform: rotate(0deg) translateY(-5.5em);
}
.pl__dot:nth-child(2) {
animation: dot2 8s linear infinite;
transform: rotate(30deg) translateY(-5.5em);
}
.pl__dot:nth-child(3) {
animation: dot3 8s linear infinite;
transform: rotate(60deg) translateY(-5.5em);
}
.pl__dot:nth-child(4) {
animation: dot4 8s linear infinite;
transform: rotate(90deg) translateY(-5.5em);
}
.pl__dot:nth-child(5) {
animation: dot5 8s linear infinite;
transform: rotate(120deg) translateY(-5.5em);
}
.pl__dot:nth-child(6) {
animation: dot6 8s linear infinite;
transform: rotate(150deg) translateY(-5.5em);
}
.pl__dot:nth-child(7) {
animation: dot7 8s linear infinite;
transform: rotate(180deg) translateY(-5.5em);
}
.pl__dot:nth-child(8) {
animation: dot8 8s linear infinite;
transform: rotate(210deg) translateY(-5.5em);
}
.pl__dot:nth-child(9) {
animation: dot9 8s linear infinite;
transform: rotate(240deg) translateY(-5.5em);
}
.pl__dot:nth-child(10) {
animation: dot10 8s linear infinite;
transform: rotate(270deg) translateY(-5.5em);
}
.pl__dot:nth-child(11) {
animation: dot11 8s linear infinite;
transform: rotate(300deg) translateY(-5.5em);
}
.pl__dot:nth-child(12) {
animation: dot12 8s linear infinite;
transform: rotate(330deg) translateY(-5.5em);
} */

/* Dark theme #e3e4e8 */
/* @media (prefers-color-scheme: dark) {
:root {
--bg: transparent;
--fg: #17181c ;
}
} */
/* Animations */
/* @keyframes dot1 {
0% {
transform: rotate(0deg) translateY(-5.5em);
}
4.1666666667% {
transform: rotate(30deg) translateY(0em);
}
50% {
transform: rotate(360deg) translateY(0em);
}
95.8333333333% {
transform: rotate(690deg) translateY(0em);
}
100% {
transform: rotate(690deg) translateY(-5.5em);
}
}
@keyframes dot2 {
0%, 4.1666666667% {
transform: rotate(30deg) translateY(-5.5em);
}
8.3333333333% {
transform: rotate(60deg) translateY(-0.5em);
}
50% {
transform: rotate(360deg) translateY(-0.5em);
}
91.6666666667% {
transform: rotate(660deg) translateY(-0.5em);
}
95.8333333333%, 100% {
transform: rotate(660deg) translateY(-5.5em);
}
}
@keyframes dot3 {
0%, 8.3333333333% {
transform: rotate(60deg) translateY(-5.5em);
}
12.5% {
transform: rotate(90deg) translateY(-1em);
}
50% {
transform: rotate(360deg) translateY(-1em);
}
87.5% {
transform: rotate(630deg) translateY(-1em);
}
91.6666666667%, 100% {
transform: rotate(630deg) translateY(-5.5em);
}
}
@keyframes dot4 {
0%, 12.5% {
transform: rotate(90deg) translateY(-5.5em);
}
16.6666666667% {
transform: rotate(120deg) translateY(-1.5em);
}
50% {
transform: rotate(360deg) translateY(-1.5em);
}
83.3333333333% {
transform: rotate(600deg) translateY(-1.5em);
}
87.5%, 100% {
transform: rotate(600deg) translateY(-5.5em);
}
}
@keyframes dot5 {
0%, 16.6666666667% {
transform: rotate(120deg) translateY(-5.5em);
}
20.8333333333% {
transform: rotate(150deg) translateY(-2em);
}
50% {
transform: rotate(360deg) translateY(-2em);
}
79.1666666667% {
transform: rotate(570deg) translateY(-2em);
}
83.3333333333%, 100% {
transform: rotate(570deg) translateY(-5.5em);
}
}
@keyframes dot6 {
0%, 20.8333333333% {
transform: rotate(150deg) translateY(-5.5em);
}
25% {
transform: rotate(180deg) translateY(-2.5em);
}
50% {
transform: rotate(360deg) translateY(-2.5em);
}
75% {
transform: rotate(540deg) translateY(-2.5em);
}
79.1666666667%, 100% {
transform: rotate(540deg) translateY(-5.5em);
}
}
@keyframes dot7 {
0%, 25% {
transform: rotate(180deg) translateY(-5.5em);
}
29.1666666667% {
transform: rotate(210deg) translateY(-3em);
}
50% {
transform: rotate(360deg) translateY(-3em);
}
70.8333333333% {
transform: rotate(510deg) translateY(-3em);
}
75%, 100% {
transform: rotate(510deg) translateY(-5.5em);
}
}
@keyframes dot8 {
0%, 29.1666666667% {
transform: rotate(210deg) translateY(-5.5em);
}
33.3333333333% {
transform: rotate(240deg) translateY(-3.5em);
}
50% {
transform: rotate(360deg) translateY(-3.5em);
}
66.6666666667% {
transform: rotate(480deg) translateY(-3.5em);
}
70.8333333333%, 100% {
transform: rotate(480deg) translateY(-5.5em);
}
}
@keyframes dot9 {
0%, 33.3333333333% {
transform: rotate(240deg) translateY(-5.5em);
}
37.5% {
transform: rotate(270deg) translateY(-4em);
}
50% {
transform: rotate(360deg) translateY(-4em);
}
62.5% {
transform: rotate(450deg) translateY(-4em);
}
66.6666666667%, 100% {
transform: rotate(450deg) translateY(-5.5em);
}
}
@keyframes dot10 {
0%, 37.5% {
transform: rotate(270deg) translateY(-5.5em);
}
41.6666666667% {
transform: rotate(300deg) translateY(-4.5em);
}
50% {
transform: rotate(360deg) translateY(-4.5em);
}
58.3333333333% {
transform: rotate(420deg) translateY(-4.5em);
}
62.5%, 100% {
transform: rotate(420deg) translateY(-5.5em);
}
}
@keyframes dot11 {
0%, 41.6666666667% {
transform: rotate(300deg) translateY(-5.5em);
}
45.8333333333% {
transform: rotate(330deg) translateY(-5em);
}
50% {
transform: rotate(360deg) translateY(-5em);
}
54.1666666667% {
transform: rotate(390deg) translateY(-5em);
}
58.3333333333%, 100% {
transform: rotate(390deg) translateY(-5.5em);
}
}
@keyframes dot12 {
0%, 45.8333333333% {
transform: rotate(330deg) translateY(-5.5em);
}
50% {
transform: rotate(360deg) translateY(-5.5em);
}
54.1666666667%, 100% {
transform: rotate(360deg) translateY(-5.5em);
}
} */

/* end SPINNER RELOJ */





/* SPINNER VERDE */

  /* #h {
    position: relative;
    width: 81.6666666667px;
    margin: 100px auto;
    transform: rotate(45deg);
  }
  #h #a {
    position: absolute;
    width: 70px;
    height: 70px;
    border-width: 11.6666666667px;
    border-color: #6ab071;
    border-style: solid;
    border-radius: 70px;
    border-bottom-color: transparent;
    border-right-color: transparent;
    animation: goa 2s 0.5s linear infinite;
  }
  #h #m {
    position: absolute;
    width: 35px;
    height: 35px;
    border-width: 11.6666666667px;
    border-color: #b2dea6;
    border-style: solid;
    border-radius: 70px;
    border-bottom-color: transparent;
    border-right-color: transparent;
    top: 17.5px;
    left: 17.5px;
    animation: gom 2s linear infinite;
  }
  #h #l {
    position: absolute;
    width: 0;
    height: 0;
    background: red;
    border-width: 11.6666666667px;
    border-color: #e0f1db;
    border-style: solid;
    border-radius: 70px;
    top: 35px;
    left: 35px;
  }
  
  @keyframes goa {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-180deg);
    }
    50% {
      transform: rotate(-180deg);
    }
    75% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  @keyframes gom {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(180deg);
    }
    50% {
      transform: rotate(180deg);
    }
    75% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(0deg);
    }
  } */

/* end SPINNER VERDE */