/* Container for loader */
.loader-container {
  position: fixed;
  /* Fixed position */
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  /* Black background with opacity */
  z-index: 9999;
  /* Highest z-index so it appears on top */
  display: flex;
  /* Use flexbox for centering */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  flex-direction: column;
  gap: var(--sp-m);
}

.local-loader-inner-cont{
  padding:var(--sp-xx) var(--sp-xx);
  border-radius:0.25em;
  background-color: white;
  height: fit-content;
  display: flex;
  /* Use flexbox for centering */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  gap:var(--sp-m);
  /* Center vertically */
  flex-direction: column;
}

.loader {
  width: 48px;
  height: 48px;
  border: 3px solid #fff;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.loader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: #4279bc;
}

@keyframes rotation {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  }
}

.loader_text {
  color: white;
  text-align: center;
}

.tests_loader_pad {
  background-color: #80808073;
  color: white;
  padding: var(--sp-xs);
  border-radius: 0.25em;
  font-size: var(--text-size-100);
}

.waiting_room {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.waiting_bg_wrapper {
  /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
  background: linear-gradient(-45deg, #4279bc, #86b6f3, #b8d7ff, #c2e9fb);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  min-height: 80vh;
  min-width: 90vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25em;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

@keyframes gradient {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

.waiting_card {
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 0.3px 0.4px rgba(0, 0, 0, 0.025),
      0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
  border-radius: 1em;
  min-width: 450px;
  min-height: 150px;
}

.test_process_text {
  font-size: 20px;
  font-weight: 400;
}

#battery_counter{
  margin-top:5px;
}

.waiting_area_text {
  font-size: var(--text-size-100);
  color: grey;
}

#processing_status {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  position: relative;
  padding: var(--sp-m) var(--sp-m) var(--sp-m) var(--sp-mm);
}

.loader_dots,
.loader_dots:before,
.loader_dots:after {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation-fill-mode: both;
  animation: bblFadInOut 2.8s infinite ease-in-out;
}
.loader_dots {
  color: #86b6f3;
  top: 0px;
  right: 50px;
  font-size: 7px;
  position: absolute;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader_dots:before,
.loader_dots:after {
  content: "";
  position: absolute;
  top: 0;
}
.loader_dots:before {
  color: #b8d7ff;
  left: -3.5em;
  animation-delay: -0.42s;
}
.loader_dots:after {
  color: #4279bc;
  left: 3.5em;
}

@keyframes bblFadInOut {
  0%,
  80%,
  100% {
      box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
      box-shadow: 0 2.5em 0 0;
  }
}

/* TEXT STUFF */

.you_can_leave {
  padding-top: 5px;
  border-top: 1px solid lightgrey;
  font-size: var(--text-size-90);
  color: grey;
  text-align: center;
}

.leave_fields_outer {
  border-top: 1px solid lightgrey;
  padding-top: var(--sp-m);
  display: flex;
  gap: var(--sp-s);
}

.wait_link_outer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: rgb(243 243 243);
  min-width: 50px;
  min-height: 50px;
  border-radius: 0.5em;
  padding: var(--sp-m);
  align-items: center;
  text-decoration: none;
  justify-content: flex-end;
}

.wait_link_outer:hover {
  background-color: rgb(231 230 230);
  cursor: pointer;
}

.wait_svg {
  
  fill: #505050;
  height: auto;
  width: 20px;
}

.wait_svg_text {
  color: #505050;
  font-size: var(--text-size-100);
}

.waiting_test_div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
}

.wait_svg_outer svg{
  color:#505050;
  stroke-width:2;
}

.count_num{
  background-color: #dbdbdb7a;
  padding: 0 5px;
  border-radius:0.25em;
}

@media (max-width: 767px) {
  .waiting_card {
      max-width: 90vw;
      min-width: 90vw;
      min-height: 150px;
  }

  .waiting_bg_wrapper {
      padding: var(--sp-m);
  }
}


.leave_fields_outer_welcome{
  border-top: 1px solid lightgrey;
  padding-top: var(--sp-m);
  display: flex;
  gap: var(--sp-s);
  justify-content: center;
}