body{
    background-color: #1C1A29!important;
}
#html5-qrcode-button-camera-start{
    margin-top: 30px !important;
    width: 100% !important;
    max-width: 500px !important;
    background: #06A469 !important;
    color: #fff !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}
#html5-qrcode-button-camera-stop{
    margin-top: 30px!important;
    width: 100%!important;
    max-width: 500px!important;
    background: #924653!important;
    color: #fff!important;
    border-radius: 10px!important;
    text-transform: uppercase!important;
    font-weight: 700!important;
    font-size: 18px!important;
}
.form-control:active{
border: 0px!important;
}
.form-control::placeholder{
text-align: center!important;
color: #fff!important;
}
.container{
    text-align: center;
    }
#form{
    text-align: center!important;
    padding-top: 100px !important;
}
#qrReader__scan_region img{
    background-color: #2F2C3F !important;
    padding: 40px 60px!important;
    border-radius: 10px!important;
}
#form .btn-primary{
    width: 100% !important;
    max-width: 500px !important;
    background: #6C61AF !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 18px !important;
    border: 0px !important;
    font-size: 18px!important;
}
.chEventContainer{
    padding-top: 30px;
}
.chEvent{
    width: 100% !important;
    max-width: 500px !important;
    background: #6C61AF !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 18px !important;
    border: 0px !important;
    font-size: 18px!important;
}

.onput{
    color: #fff !important;
    display: block!important;
    margin-bottom: 0px!important;
}
#manualCode{
    border-radius: 10px !important;
    height: 50px !important;
    width: 100% !important;
    max-width: 500px !important;
    background-color: transparent !important;
    border: 1px solid #ffffff65;
    margin-bottom: 30px!important;
    text-align: center!important;
    color: #06A469;
}
#topInfoBlock{
    height: 0px !important;
    width: 100% !important;
    position: sticky;
    left: 0%;
    top: 0%;
    vertical-align: middle;
    padding: 0px !important;
    transform: translate(0%, 0%);
    z-index: 9999;
}
.info {
    margin: 0px auto!important;
}
@media screen and (min-width: 768px){
.info.error{
    background-color: #A40606 !important;
    color: #fff !important;
    height: auto!important;
    position: absolute;
    vertical-align: middle;
    width: 100vw !important;
    left: 50%;
    top: 0px;
    transform: translate(-50%,-0%);
    padding: 20px 0px 20px 0px !important;
    font-weight: 700 !important;
    max-width: 500px!important;
    border-radius: 0px!important;
}
}
@media screen and (max-width: 767px){
.info.error{
    background-color: #A40606 !important;
    color: #fff !important;
    height: auto!important;
    position: absolute;
    vertical-align: middle;
    width: 100vw !important;
    padding: 20px 0px 20px 0px !important;
    font-weight: 700 !important;
    max-width: 100vw!important;
    border-radius: 0px!important;
}
}
@media screen and (min-width: 768px){
.info {
    background: #06A469!important;
    color: #fff !important;
    height: auto!important;
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translate(-50%,-0%);
    vertical-align: middle;
    width: 100vw !important;
    padding: 20px 0px 20px 0px !important;
    font-weight: 700 !important;
    max-width: 500px!important;
    border-radius: 0px!important;
}
}
@media screen and (max-width: 767px){
    .info {
        background: #06A469!important;
        color: #fff !important;
    height: auto!important;
    position: absolute;
    vertical-align: middle;
    width: 100vw !important;
    padding: 20px 0px 20px 0px !important;
    font-weight: 700 !important;
    max-width: 100vw!important;
    border-radius: 0px!important;
        
    }
    }
#qrReader span{
    color:#fff!important;
}
#qrReader select {
    border-radius: 10px!important;
    border:1px solid #fff!important;
    color:#fff!important;
    width: 100%!important;
    max-width:500px!important;
    padding: 10px !important;          /* Add padding inside the select box */
    font-size: 16px !important;        /* Adjust the font size */
    background-color: #2F2C3F !important; /* Set background color */
    color: #fff !important;            /* Text color inside the select box */
    appearance: none !important;       /* Remove default dropdown arrow in most browsers */
    cursor: pointer !important;        /* Add pointer cursor */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important; /* Custom arrow with white color */
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    height: 50px!important;
    margin-top: 15px!important;
  }
  
  #qrReader select:focus {
    border-color: #ffffff70 !important;
  }
  
  #qrReader select option {
    background-color: #ffffff !important;         /* Background color of the options */
    color: #333 !important;
    padding: 10px !important;
  }
  
  #qrReader select option:hover {
    background-color: #f0f0f0 !important;
    color: #000 !important;
  }
  #qrReader button{
    color: #ffffff!important;
    width: 100% !important;
    max-width: 500px !important;
    background:#6C61AF !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 18px !important;
    border: 0px !important;
    font-size: 18px!important;
  }
@media screen and (max-width: 499px){
   
    #html5-qrcode-button-camera-start{
        margin: 20px 3%!important;
        width: 94%!important;
    }
    #html5-qrcode-button-camera-stop{
        margin: 20px 3%!important;
        width: 94%!important;
    }
    #manualCode{
        margin: 20px 3% 5px 3%!important;
        width: 94%!important;
    }
    #form .btn-primary{
        margin: 20px 3%!important;
        width: 94%!important;
    }
    #qrReader select{
        margin: 20px 3%!important;
        width: 94%!important;
    }
    #qrReader button{
        margin: 20px 3%!important;
        width: 94%!important;
    }
}


.lastScans { background: #999; color: #fff; max-width: 500px; margin: auto; margin-bottom: 30px; margin-top: 20px; border-radius: 10px; padding: 10px }
.lastScans table { width: 100%; }
.lastScans td { padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #666 }
.lastScans tr:last-child td { border-bottom: none }