@font-face {  font-family: 'Mon';  src: url('../fonts/Montserrat-Regular.ttf');    font-weight: normal;  font-style: normal; }
@font-face {  font-family: 'MonB';  src: url('../fonts/Montserrat-Bold.ttf');    font-weight: normal;  font-style: normal; }
@font-face {  font-family: 'MonL';  src: url('../fonts/Montserrat-Light.ttf');    font-weight: normal;  font-style: normal; }
@font-face {  font-family: 'MonM';  src: url('../fonts/Montserrat-Medium.ttf');    font-weight: normal;  font-style: normal; }
@font-face {  font-family: 'MonF';  src: url('../fonts/Montserrat-Thin.ttf');    font-weight: normal;  font-style: normal; }
@font-face {  font-family: 'MonS';  src: url('../fonts/Montserrat-SemiBold.ttf');    font-weight: normal;  font-style: normal; }



body  {  font-family: 'Mon'; font-size:14px; margin-top:0px; padding:0px; background-color: #efefef;
         min-width: 360px; 
         overflow-x: hidden;
         
      }


html,body,div,span,applet,obJect,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,
em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,
tt,var,hr,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td,figure {
    margin:0;
    padding:0;
    border:none;
    outline:none;
    }

:focus {
    outline:none; 
    }

.red_alr { text-align:left;  background-color:#fff; color:#red; font-size:12px; font-family: 'MonM'}

.main_begin {width:390px;  min-height:500px;   background-color: #ffffff; 
                           height: 100vh;  margin: 0; 
             } 
.top_green  {height:66.77px; width:100%; background-color:#BFD100; text-align:left;}
.top_gray   {height:83.71px; width:100%; background-color:#6F7577; margin-top:3px;}
.txt_w      {width:228px; color:#fff; font-family: MonM;  text-align:left;float:left; 
             margin-left:20px;margin-top:20px; font-size:16px;}
.divimg     {float:right; width:104;padding:0px; margin-top:-47px; margin-right:10px;}
.top_img    {widrg:103.47px; height:154,28px; }             
.zag        {clear:btoth;margin-top:-40px; width:auto;  color:#000;
             text-align:left; font-size:20px; font-family:MonM; padding:20px; padding-bottom:15px;}

.zag_result  {clear:btoth;margin-top:-20px; width:auto;  color:##a9ba00; 
             text-align:left; font-size:20px; font-family:MonS;  padding:0; padding-bottom:24px; }


.green_line {width:150px; border-top:4.5px solid #CEDC00; height:5px; float:left; margin-left:20px; margin-top:-12px;
              }

.singl_text {clear:both;float:left; margin-top:-10px; width:auto;  color:#000; text-align:left;
  font-size:16px; font-family:Mon; padding:20px;  width:330px;}
.cls {clear:both;}

.bg_picture { background-color:#f5f5f5; width:350px; height:141px;  }
.form {padding:0px; width:350px; text-align:left; padding-bottom:30px; padding-top:5px;}
.form_left {width:205px; height:42px;  float:left;border:1.5px #C4C4C4 solid; 
            border-radius:3px;  background-color:#fff; padding:0px;}
.form_right {float:right; width: 130px; height:45px; padding:0px;}            
.read_cam {text-align:center; height:42px;}

button { width:100%; height:100%;  background-color: #BFD100; color:#ffffff; 
         font-family:MonS;  text-align:center; border-radius:3px; cursor:pointer; 
         border:1px #BFD100 solid;}
button:hover {border:1px #a9ba00 solid; background-color: #a9ba00;}         

#barcodeInput {width:162px; border:1px solid; heigt:100%; padding:4px;  padding-top:5px;margin:1px; border-radius:3px; text-align:center; 
          border:0px; cursor:pointer; font-family:Mon; font-size:18px;}
#barcodeInput::placeholder {
    color: #ccc; /* Установите нужный цвет */
    opacity: 1;  /* Убедитесь, что текст виден */
    font-size:15px;
}    

.fileName,
.custom-file-upload {font-family:Mon;cursor:pointer;  }

.red_alert { background-color:#E34C4C; width:330px; margin-left:0px; margin-top:-30px; padding:10px; color:#ffffff; 
             font-family:MonM font-size:16px; border-radius:3px; z-index:100;}

.table {
                    border-collapse: collapse;
                    width: 100%;
                    border: 1px solid #F7FBCC;
                }
                .table td {
                    border: 1px solid #CADE00;
                    padding: 10px;
                    background-color: #F7FBCC;
                    color: #000;
                }
                .table th {
                    border: 1px solid  #CADE00;
                    padding: 10px;
                    background-color: #F7FBCC;
                    color: #000;
                }

#camera-view-container {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            font-size: medium;
            background: #eee;
            display: none;
        }


.latest-result {
            width: 85%;
            display: block;
            margin: 2vh auto;
            padding: 0.4rem 0.8rem;
            color: inherit;
            border: 1px solid #fe8e14;
            font-size: 1.5rem;
            border-radius: 0.2rem;
            text-align: center;
        }
        .latest-result::placeholder {
            color: #b0bec5;
        }
        .latest-result:focus {
            outline: none;
            box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
        }                        

#tr1, #tr2 {display:block;}
.brdiv {display:none;clear:both; height:10px;}

@media  (min-width: 0px) and (max-width: 384px)
{ /* мобильники */
  #tr1, #tr2 {display:none;}
  .brdiv {display:block;}
}

 
@media  (min-width: 385px) and (max-width: 767px)
{ 
  #tr1,#tr2 {display:none;}
  .brdiv {display:block;}
}

@media  (min-width: 768px) and (max-width: 1279px) 
{
  #tr1,#tr2 {display:none;} 
}
 
@media  (min-width: 1280px) 
{  /* большой экран */
   
}