
@media only screen and (min-width: 768px) {
    #scanner{
        display:none;
    }
    .modal-popup.scan-container{
        display: none;
    }
    
}
@media only screen and (max-width: 768px){
    /* .modal-popup.scan-container{
        display: none;
    }
    .modal-popup.scan-container.modal-slide._show{
        display: block;
    } */
    .scan-container .modal-content{
        height: 10%;
    }
    .scan-container #results .reader-config-group{
        display: none;
    }
    .scan-container #results .reader-config-group.show-options {
        display: block;
        padding: 10px 0px;
        display: block;
        border: unset;
        margin: unset;
        margin-bottom: 10px;
    }
    .scan-container .input-group{
        margin: 0px;
    }
    #scanner-option-btn{
        background-color: #f78f1f;
        background: #f78f1f;
        Border: solid 1px #f78f1f;
        color: white;
    }
    .scan-container fieldset.input-group {
        padding: unset;
        border: unset;
        margin-bottom: 10px;
    }
    
    /* .modal-popup.scan-container.modal-slide {
        left: 30px;
        right: 30px;
        top: 25%;
        z-index: 900;
        height: 50%;
        overflow: hidden !important;
    } */
    .scan-container #results video {
        max-width: 100%;
        width: 100%;
        /* height: 250px; */
    }
    .scan-container #results{
        max-height: 250px !important;
    }
    #results #interactive{
        position: relative;
    } 
    #results #interactive video{
        position: relative;
    } 
    #results div#newScan {
        display: none;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 20px;
        text-align: center;
        color: white;
        border: 0;
        height: 100%;
        z-index: 11111;
    }
    canvas.drawingBuffer {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0px;
        /* display: none; */
    }
    .modal-popup.scan-container .modal-footer {
      display: none;
    }
    .modal-popup.scan-container .modal-inner-wrap {
        height: 100% !important;
        max-height: 100vh;
    }
    
    #scanner{
        margin: unset;
        box-shadow: none;
        padding: unset;
        background: transparent;
        border: unset;
        margin-top: 10px;
    }
    #scanner::before{
        display: block;
        content: url(../images/scan-icon.svg);
        width: 20px;
        height: 20px;
        padding: 0px 5px;
    }
    #scanner .text{
        display: block;
        color: white;
        width: 1px;
        height: 1px;
    }
    #results .barcode-message{
        margin: 0 0 10px;
        padding: 12px 20px 12px 25px;
        display: block;
        font-size: 1.3rem;
        display: none;
   
    }
    #results .barcode-message.success{
        background: #e5efe5;
        color: #006400;
        display: block;
    }
    #results .barcode-message.error{
        background: #fae5e5;
        color: #e02b27 ;
        display: block;
    }
}
