@import url('https://fonts.googleapis.com/css2?family=Google+Sans&display=swap');
html { -webkit-text-size-adjust: none; }

      strong{
        font-weight: 500;
      }
      body{
        background-color: rgba(0, 0, 0, .1);
        font-family: 'Google Sans', sans-serif;
        

      }
      .whitebg{
        background-color: white;

      }
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }
      
      @media (min-width: 992px) {
        .rounded-lg-3 { border-radius: .3rem; }
      }
      h4{
        margin-top: -20px;

      }

      
    #loadingOverlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 255, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
#scanOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

#scanSuccessOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(36, 36, 36, 0.781);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

    
    .centered-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
    
    #opendoortext {
      margin: 0;
    }
    
    
    
    
    #ErrorOverlay div,
    #ErrorOverlay p {
      text-align: center; /* Center text within each child element */
    }


      body {
        display: block;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
      }
      
    

      

      






.circle-error,
.circle-border {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.circle-error {
  z-index: 1;
  position: relative;
  background: white;
  transform: scale(1);
  animation: success-anim 700ms ease;
}

.circle-border {
  z-index: 0;
  position: absolute;
  transform: scale(1.1);
  animation: circle-anim 400ms ease;
  background: #f86;
}

@keyframes success-anim {
  0% {
    transform: scale(0);
  }
  30% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes circle-anim {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1.1);
  }
}

.error::before,
.error::after {
  content: "";
  display: block;
  height: 4px;
  background: #f86;
  position: absolute;
}

.error::before {
  width: 40px;
  top: 48%;
  left: 16%;
  transform: rotateZ(50deg);
}

.error::after {
  width: 40px;
  top: 48%;
  left: 16%;
  transform: rotateZ(-50deg);
}


        /* Reverse the order of the checkbox and label */
        .custom-control.custom-checkbox-reversed {
          flex-direction: row-reverse;
          justify-content: flex-end;
      }
      .custom-control-label {
          order: 2;
      }





    /* ICONS */

    * {
      margin: 0;
      padding: 0;
  }
  
  .svg-box {
      display:inline-block;
      position: relative;
      width:150px;
  }
  
  .green-stroke {
      stroke:#7CB342;
  }
  
  .red-stroke {
      stroke: #FF6245;
  }
  
  .yellow-stroke {
      stroke: #FFC107;
  }
  
  
  .circular circle.path {
      stroke-dasharray: 330;
      stroke-dashoffset: 0;
      stroke-linecap: round;
      opacity: 0.4;
      animation: 0.7s draw-circle ease-out;
  }
  
  /*------- Checkmark ---------*/
  .checkmark{
    stroke-width: 6.25;
      stroke-linecap: round;
    position:absolute;
      top: 56px;
      left: 49px;
      width: 52px;
      height: 40px;
  }
  
  .checkmark path {
      animation: 1s draw-check ease-out;
  }
  
  @keyframes draw-circle {
      0% {
          stroke-dasharray: 0,330;
          stroke-dashoffset: 0;
          opacity: 1;
      }
  
      80% {
          stroke-dasharray: 330,330;
          stroke-dashoffset: 0;
          opacity: 1;
      }
  
      100%{
          opacity: 0.4;
      }
  }
  
  @keyframes draw-check {
      0% {
          stroke-dasharray: 49,80;
          stroke-dashoffset: 48;
          opacity: 0;
      }
  
      50% {
          stroke-dasharray: 49,80;
          stroke-dashoffset: 48;
          opacity: 1;
      }
  
      100% {
          stroke-dasharray: 130,80;
          stroke-dashoffset: 48;
      }
  }
  
  /*---------- Cross ----------*/
  
  .cross {
      stroke-width:6.25;
      stroke-linecap: round;
      position: absolute;
      top: 54px;
      left: 54px;
      width: 40px;
      height: 40px;
  }
  
  .cross .first-line {
      animation: 0.7s draw-first-line ease-out;
  }
  
  .cross .second-line {
      animation: 0.7s draw-second-line ease-out;
  }
  
  @keyframes draw-first-line {
      0% {
          stroke-dasharray: 0,56;
          stroke-dashoffset: 0;
      }
  
      50% {
          stroke-dasharray: 0,56;
          stroke-dashoffset: 0;
      }
  
      100% {
          stroke-dasharray: 56,330;
          stroke-dashoffset: 0;
      }
  }
  
  @keyframes draw-second-line {
      0% {
          stroke-dasharray: 0,55;
          stroke-dashoffset: 1;
      }
  
      50% {
          stroke-dasharray: 0,55;
          stroke-dashoffset: 1;
      }
  
      100% {
          stroke-dasharray: 55,0;
          stroke-dashoffset: 70;
      }
  }
  
  .alert-sign {
      stroke-width:6.25;
      stroke-linecap: round;
      position: absolute;
      top: 40px;
      left: 68px;
      width: 15px;
      height: 70px;
      animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .alert-sign .dot {
      stroke:none;
      fill: #FFC107;
  }
  
  @keyframes alert-sign-bounce {
      0% {
          transform: scale(0);
          opacity: 0;
      }
  
      50% {
          transform: scale(0);
          opacity: 1;
      }
  
      100% {
          transform: scale(1);
      }
  }