/* CONTAINER COM CONTEÚDO DE CARREGAMENTO */
/* CONTAINER COM CONTEÚDO DE CARREGAMENTO */
.container-loading {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   background-color: var(--color-main);
   color: #FFFFFF;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 20px;
   opacity: 0;
   z-index: 5;
   pointer-events: none;
   cursor: progress;
   transition: all 0.3s ease;
   -webkit-animation: all 0.3s ease;
}
.container-loading.visible {
   opacity: 1;
   pointer-events: all;
}

.container-loading svg {
   width: 90px;
   height: 90px;
}
.container-loading .content-texts {
   position: relative;
   width: 420px;
   max-width: 90%;
   margin: 0px auto;
   text-align: center;
}
.container-loading .content-texts h3 {
   position: absolute;
   width: 100%;
   margin: 0px;
   color: #ffffff;
   font: normal normal 500 18px/24px Segoe UI;
   font-family: system-ui;
   line-height: 1.3;
   letter-spacing: 0px;
   text-align: center;
   opacity: 0;
   transition: opacity 0.3s ease;
}
.container-loading .content-texts h3:first-child {
   position: absolute;
}
.container-loading .content-texts h3.visible {
   opacity: 1;
}


@media (max-width: 500px) {
   .container-loading {
      height: 100vh;
   }

   .container-loading svg {
      width: 80px;
      height: 80px;
      margin-top: -80px !important;
   }
   .container-loading .content-texts h3 {
      font: normal normal 500 20px/25px Segoe UI;
      font-family: system-ui;
      line-height: 1.3;
   }
}