:root {
   --bg-color: #f3f3f6;
   --bg-secondary-color: #fff;
   --font-color: #2f4961;
   --color-primary: #00b5a0;
   --font-family-sans: Montserrat, "Open Sans", "Pt Sans", Verdana, Tahoma, Arial, sans-serif;
}
body {
   height: 100vh;
   background-image: url(assets/bg.svg);
   background-repeat: no-repeat;
   background-position: right bottom;
}

.logo img {
   max-width: 100%;
   width: 200px;
   height: 7em;
   /*    margin-left: 1.5em;*/
}

.card {
   background-color: #fff;
   box-shadow: none;
   padding: 3rem;
   min-width: 40rem;
}

.card header {
   font-weight: 600;
   margin-bottom: 2rem;
   text-align: center;
}

.qrcode {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5rem;

   .card svg {
      width: 22rem;
      height: auto;
      padding: 2rem;
   }

   img {
      height: 5rem;
      width: auto;
   }

   &.is_desktop .hide_desktop {
      display: none;
   }

   &.is_mobile .hide_mobile {
      display: none;
   }
}

.qrcode.is_progress .hide_in_progress {
   display: none;
}

.qrcode:not(.is_progress) .show_in_progress {
   display: none;
}

form {
   max-width: 45rem;
   margin: 1rem auto;

   .info {
      /* background-color: unset; */
      /* font-family: var(--font-family-sans); */
      font-size: 1.2em;
   }
}

.start {
   max-width: 50rem;
   margin: 1rem auto;

   a {
      line-height: 2;
   }
}

body footer {
   position: sticky;
   top: 100%;
   background-color: #fafafa;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding: 2rem;

   a {
      font-size: 2.5rem;
      /* color: #2f4961; */
      line-height: 1;
      font-weight: 500;
   }
}

.error:not(:empty) {
   background: #edd9d9;
   color: #874040;
   padding: 0.5rem 1rem;
   border-radius: 4px;
}

.warning {
   color: #ee7800;
   font-weight: bold;
   text-align: center;
}

.debug {
   border: 1px dotted red;
   font-size: 85%;
}

.error-page h2,
.error-page h3 {
   display: flex;
   align-items: center;
   justify-content: center;
}
.error-page h2 {
   color: var(--color-primary);
   font-size: 4rem;
}
.error-page h3 {
   font-size: 3rem;
}

@keyframes dots {
   0% {
      opacity: 0.2;
   }

   20% {
      opacity: 1;
   }

   100% {
      opacity: 0.2;
   }
}
.loading span {
   animation-name: dots;
   animation-duration: 1.4s;
   animation-iteration-count: infinite;
   animation-fill-mode: both;
}
.loading span:nth-child(2) {
   animation-delay: 0.2s;
}
.loading span:nth-child(3) {
   animation-delay: 0.4s;
}