body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  height: 100vh; /* Set the height of the container to viewport height */
  overflow-x: hidden; /* Hide horizontal overflow */
  overflow-y: auto; /* Enable vertical scrolling */
  position: relative; /* Position the container relative to its normal position */ 
  background-image: url('../img/bg.jpg'); /* Replace 'background.jpg' with your image */
  background-size: cover; /* Cover the entire container */
  background-attachment: fixed; /* Keep the background fixed while scrolling */
  background-position: center; /* Center the background image */
  height: 100%; /* Set the height to fill the container */
  z-index: -1; /* Send the background behind other content */
}

.content {
  text-align: center;
  color: #ffffff;
  position: relative; /* Position content relative to its normal position */
  z-index: 1; /* Ensure content appears above the background */
}



.dt-column-title, .dt-column-order{
    color: white !important;
}

.tag {
    display: inline-block;
    padding: 2px 6px;
    margin-right: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.remove-tag {
    margin-left: 5px;
    background-color: #ddd;
    border: none;
    cursor: pointer;
}

.profile_pic{
    width: 100%;
    height: 100%; 
}


#reader2__dashboard_section_csr{
    display: none !important;
  }
  
  .html5-qrcode-element{
    border: 2px dashed #b7b7b7;
    padding: 10px;
    text-decoration: none !important;
    margin-bottom: 10px !important;
  }
  
  
  #reader2{
    border: none !important
  }



  .not_verified{
    background-color: #33ff003d;
    border: 2px solid green;
    color: black;
    padding: 7px;
    border-radius: 20px;
    font-size: 20px;

  }

  .verified{
    background-color: #ff00003d;
    border: 2px solid #c34242;
    color: black;
    padding: 7px;
    border-radius: 20px;
    font-size: 20px;

  }

  .verify_btn{
    bottom: 0;
    position: fixed;
    width: 100%;
    border: none;
    margin-left: -10px;
    background-color: #7367f1 !important;
    color: white;
    font-size: 18px;
    font-weight: 700;
    padding: 10px;
  }


  .scan_again{
    bottom: 0;
    position: fixed;
    width: 100%;
    border: none;
    margin-left: -10px;
    background-color: #2fa31f !important;
    color: white;
    font-size: 18px;
    font-weight: 700;
    padding: 10px;
  }

  #people{
    border-bottom: 2px solid #7367f1;
    border-top: none;
    border-left: none;
    border-right: none;
  }


  .vote_btn{
    background-color: gold;
    border: 2px solid #f9d50f;
    width: 96px;
    color: white;
    font-size: 20px;
    font-weight: 700;
    font-family: system-ui;
  }



  @keyframes blink {
    0% {
        visibility: visible;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

.position-blink img {
    vertical-align: middle; /* To align the image with text */
}

.position-blink {
  animation: blink 0.5s infinite; /* Adjust the duration to make it faster */
  transition-timing-function: linear; /* Ensure smooth transition */
}


.modals {
  position: fixed;
  bottom: 0px !important;
  /* top: none !important; */
  left: 0;
  z-index: 99999;
  display: none;
  width: 100%;
  /* height: -1px !important; */
  overflow: hidden;
  outline: 0;
  padding-right: 0px !important;

}


.modal-backdrop {
  background-color: #000000a1 !important;
  z-index: 9999 !important;
}

.modal-dialog {
  margin: -2.5px;
}

@media (min-width: 576px){
  .modal-dialog {
      max-width: 100% !important;
  }
}

.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}


.visa_vote_btn:focus{
  outline:none !important;
}