/* ----------------------------------------------------------------------------------------------------- */

.tela_escura {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: linear 0.4s, opacity 0.4s;
  z-index: 5;
}

/* ----------------------------------------------------------------------------------------------------- */

.tela_escura_fixa {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: linear 0.4s, opacity 0.4s;
  z-index: 5;
}

/* ----------------------------------------------------------------------------------------------------- */

.tela_escura_exibir {
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------------------------------------------------------------------- */

.tela_transparente {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  opacity: 0;
  visibility: hidden;
  transition: linear 0.4s, opacity 0.4s;
  z-index: 7;
}

.tela_transparente_exibir {
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------------------------------------------------------------------- */

/* Loading */
:root {
  --animation-speed: 2s;
  --primary-color: #fff;
  --secondary-color: #000;
  --background-color: #313131;
  --text-color: #fff;
  --font: sans-serif;
  --spinner-size: 10;
  --line-color: #0ebeff;
  --line-alpha: 0.73;
  --ring-color: #000;
  --ring-alpha: 0.5;
  --ring-size: 4;
}

.loading {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.spinner {
  font-size: calc(var(--spinner-size) * 1em);
  width: 1em;
  height: 1em;
  border-radius: 50%;
}
.spinner .line {
  fill: none;
  stroke: var(--line-color);
  stroke-width: var(--ring-size);
  opacity: var(--line-alpha);
  stroke-linecap: round;
  transform-origin: 50% 50%;
  transform: rotate3d(0, 0, 1, 0deg);
  animation: 2156ms spinner-arc ease-in-out infinite, 1829ms spinner-rotate linear infinite;
}

.spinner .ring {
  fill: none;
  stroke: var(--ring-color);
  stroke-width: var(--ring-size);
  opacity: var(--ring-alpha);
}

@keyframes spinner-rotate {
  to {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@keyframes spinner-arc {
  from {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: 100 150;
    stroke-dashoffset: -140;
  }
}

/* ----------------------------------------------------------------------------------------------------- */