/* /Layout/MainLayout.razor.rz.scp.css */
@media (min-width: 641px) {

    .page[b-v8q5m4zhkd] 
    {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .logo[b-v8q5m4zhkd] 
    {
        background-color: rgb(52, 52, 52);
        transition: all 0s ease-in-out;
    }

}


.logo-text[b-v8q5m4zhkd] {
    
    padding-top: 10px;
    padding-bottom: 5px;
    color: white;
    height: 71px;
    
    
  
    

    

    

}


main[b-v8q5m4zhkd] {
    flex: 1;
}



.top-nav-menu[b-v8q5m4zhkd] {

   
    position: sticky;
    top: 0px;
    
    
    
    
    
    
}





.padding-body[b-v8q5m4zhkd] {
    background-color: rgb(245, 245,245);
    position: flex;
    min-height: calc(100dvh - 71px - 100px);
    
    padding-top: 80px;
    padding-bottom: 30px;
    z-index: 1;

}




.sidebar[b-v8q5m4zhkd] {
    
    background-color: rgb(30, 30, 30, 0.9);
    z-index:10;

    
}

.footer[b-v8q5m4zhkd] {
    text-align: center;
    line-height: 100px;
    user-select: none;
    outline: none; 
}





/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-d13n4iuesv] {
  
    border: 0px;
    margin-top: 10px;
    margin-left: 10px;
    
    
}









.top-row[b-d13n4iuesv] {
  position: absolute;
  width: 100%;
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .5);
   
  
  
    
    height: 50px;
    background-color: rgb(30, 30, 30, 0.9);
    backdrop-filter: blur(7px) brightness(115%);
    -webkit-backdrop-filter: blur(7px) brightness(115%);
    
    transition: all .3s ease-in-out;
}


.nav-item[b-d13n4iuesv]  a {
color: #d7d7d7;
}


.nav-item-collapse[b-d13n4iuesv]  a {
color: #d7d7d7;
}




.nav-left[b-d13n4iuesv] {
  position: absolute;
  top: 1px;
  left: 5px;

}


.nav-right[b-d13n4iuesv] {
    position: absolute;
    top: 1px;
    right: 5px;

}

.nav-right-logout[b-d13n4iuesv] {
  position: absolute;
  top: 10.5px;
  right: 70px;
  color: #d7d7d7;
}

.nav-right-logout:hover[b-d13n4iuesv] {
  cursor: pointer;
}





@media (max-width: 641px) {

    .navbar-brand[b-d13n4iuesv] {
        font-size: 1.1rem;
        
    }
    
    .oi[b-d13n4iuesv] {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .nav-item[b-d13n4iuesv] {
      position: absolute;
      top: -1000px;
      
      
    }
    .nav-item-collapse[b-d13n4iuesv] {
        font-size: 28px;
        padding-bottom: 10px;
        
    }
    .nav-item-collapse:first-of-type[b-d13n4iuesv] {
        padding-top: 20px;
        
    }

    .nav-item-collapse:last-of-type[b-d13n4iuesv] {
        padding-bottom: 20px;
    }

    .nav-item-collapse[b-d13n4iuesv]  a {
        color: #d7d7d7;
        
        display: flex;
        
        
        
    }

    .nav-item-collapse[b-d13n4iuesv]  a.active {
        
        color: white;
    }

    .nav-item-collapse[b-d13n4iuesv]  a:hover {
        
        color: white;
    }

    
    
    
    
    .nav-scrollable[b-d13n4iuesv] {
            
        /* Allow sidebar to scroll for tall menus */
        /*height: calc(100vh - 3.5rem);*/
        
        position:fixed;
        top: 25%;
        left: 10%;
      
      /* bring your own prefixes */
      /*transform: translate(-50%);*/
    }


    .fade-in-collapse[b-d13n4iuesv] {
      opacity: 0; /* начальное значение непрозрачности */
      animation: fadeInCollapse-b-d13n4iuesv ease-in 1; /* добавляем анимацию fadeIn */
      animation-fill-mode: forwards; /* будет видимым после завершения анимации */
      animation-duration: 0.5s; /* длительность анимации в 1 секунду */
      
    }
    
    @keyframes fadeInCollapse-b-d13n4iuesv {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    
    
      
      
      
    
    
  
      .nav-icon[b-d13n4iuesv] {
        display: inline-block;
        margin: 0em;
        width: 25px;
        
      }
      /*display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:50%/100% 100% no-repeat}
      */
      .nav-icon[b-d13n4iuesv]:after, 
    .nav-icon[b-d13n4iuesv]:before{
      background-color: white;
      border-radius: 2px;
      content: '';
      display: block;
      height: 2px;
      margin: 5px 0;
      transition: all .2s ease-in-out;
      
      
    }
    
    .nav-icon-opened[b-d13n4iuesv]:before {
        transform: translateY(3.6px) rotate(135deg);
      }
    .nav-icon-opened[b-d13n4iuesv]:after {
        transform: translateY(-3.6px) rotate(-135deg);
      }
    

    

    




}

  @media (min-width: 641px) {
    

    .element[b-d13n4iuesv] {
      all: none;
      
    }

    .nav-item[b-d13n4iuesv] {
      display:inline-block;
      font-size: 14px;
      margin-top: 6px;
      margin-left: 20px;
      
      
      padding-bottom: 0.5rem;
  }
  .nav-item[b-d13n4iuesv]  a {
    color: #d7d7d7;
    
  }
  .nav-item[b-d13n4iuesv]  a:hover {
    color: white;
    
  }
  .nav-item[b-d13n4iuesv]  a.active {
    color: white;
    
  }
  
    .nav-item-collapse[b-d13n4iuesv] {
      position: absolute;
        top: -1000px;
      
    }

    

    .top-row-opened[b-d13n4iuesv] {
  
        height: 50px;
        background-color: rgb(30, 30, 30, 0.9);
        backdrop-filter: blur(7px) brightness(115%);
        -webkit-backdrop-filter: blur(7px) brightness(115%);
        transition: all 0s ease-in-out;
    }

    

    

    .navbar-toggler[b-d13n4iuesv] {
        display: none;
    }

    .collapse[b-d13n4iuesv] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    

    

    
    
       
    

    
    

    .fade-in[b-d13n4iuesv] {
      opacity: 0; /* начальное значение непрозрачности */
      animation: fadeIn-b-d13n4iuesv ease-in 1; /* добавляем анимацию fadeIn */
      animation-fill-mode: forwards; /* будет видимым после завершения анимации */
      animation-duration: .2s; /* длительность анимации в 1 секунду */
      
    }
    
    @keyframes fadeIn-b-d13n4iuesv {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
      
     

    
   
     
  }
  

/* /Pages/Home.razor.rz.scp.css */
.page[b-qkqvtk7xtj] {
    max-width: 1000px;
}

.page2[b-qkqvtk7xtj] {
    max-width: 800px;
    padding-top: 0dvh;
    margin-left: auto;
    margin-right: auto;
}

tr.fund:hover[b-qkqvtk7xtj] {
    cursor: pointer;
}

/* ==== MODAL BASE ==== */

.modal-overlay[b-qkqvtk7xtj] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.modal-card[b-qkqvtk7xtj] {
    position: relative;
    background: #fff;
    width: 95%;
    max-width: 900px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

.btn-close-modal[b-qkqvtk7xtj] {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    transition: color .2s;
    z-index: 2;
    pointer-events: auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-modal:hover[b-qkqvtk7xtj] {
    color: #000;
}

.modal-body[b-qkqvtk7xtj] {
    padding: 24px 16px 8px 16px;
}

.modal-footer[b-qkqvtk7xtj] {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px 16px 16px;
    border-top: 1px solid #e9ecef;
}

/* ==== RESPONSIVE TABLE ==== */

@media (max-width: 640px) {
    .hide-mobile[b-qkqvtk7xtj] {
        display: none;
    }
}

/* ==== LOGIN PAGE ==== */

.page-login[b-qkqvtk7xtj] {
    max-width: 300px;
    padding-top: calc(50dvh - 300px);
    margin-left: auto;
    margin-right: auto;
}

/* ==== STATUS COLORS ==== */

.online[b-qkqvtk7xtj] {
    color: green !important;
}

.offline[b-qkqvtk7xtj] {
    color: red !important;
}

/* ==== TEXT / CARD UTILITIES ==== */

.break-word[b-qkqvtk7xtj] {
    word-break: break-word;
    white-space: normal;
}

.card-header[b-qkqvtk7xtj] {
    background: white !important;
    border-bottom: 1px solid black;
}

/* ==== BUTTON / FORM LAYOUT ==== */

.btn-margin[b-qkqvtk7xtj] {
    margin: auto auto 40px auto !important;
    width: 50% !important;
}

.search-margin[b-qkqvtk7xtj] {
    margin: auto auto 40px auto !important;
    width: 70% !important;
}

.button:hover[b-qkqvtk7xtj] {
    cursor: pointer;
}

.form-check[b-qkqvtk7xtj] {
    margin-left: auto;
    margin-right: 10px;
}

.btn-outline-primary:hover[b-qkqvtk7xtj] {
    color: #0d6efd !important;
    background-color: transparent !important;
}

.btn-outline-primary:active[b-qkqvtk7xtj] {
    background-color: transparent !important;
}

.btn-primary:hover[b-qkqvtk7xtj] {
    background-color: #0d6efd !important;
}

.btn-primary:active[b-qkqvtk7xtj] {
    background-color: #0d6efd !important;
}

.btn[b-qkqvtk7xtj] {
    width: 100%;
    border-radius: 10px;
}

.btn-right[b-qkqvtk7xtj] {
    display: block;
    width: 40px;
    margin-left: auto;
    margin-right: 0;
}

/* ==== КНОПКА ПОКАЗА / СКРЫТИЯ ПАРОЛЯ ==== */

.password-toggle-btn[b-qkqvtk7xtj] {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);

    border: none;
    background: transparent;
    padding: 0;
    margin: 0;

    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    color: #666;
}

.password-toggle-btn:hover[b-qkqvtk7xtj] {
    color: #000;
}

/* ==== MOBILE CONTAINER ==== */

@media (max-width: 640px) {
    .mobile[b-qkqvtk7xtj] {
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
}
.page2:focus[b-qkqvtk7xtj],
.page2:focus-visible[b-qkqvtk7xtj] {
  outline: none;
  box-shadow: none;
}

@media (min-width: 641px) {
    .mobile[b-qkqvtk7xtj] {
        margin: 30px;
    }
}

/* ==== CAMERA & SCANNER ==== */

.camera-container[b-qkqvtk7xtj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.camera-preview[b-qkqvtk7xtj] {
    position: relative;
    width: 98%;
    max-width: 640px;
    aspect-ratio: 4/3;
    background: black;
    overflow: hidden;
    border-radius: 10px;
}

.camera-preview video[b-qkqvtk7xtj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-frame[b-qkqvtk7xtj] {
    position: absolute;
    width: 90%;
    height: 40%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    pointer-events: none;
}

/* анимированная линия (лазер) */
.scanner-line[b-qkqvtk7xtj] {
    position: absolute;
    left: 5%;
    right: 5%;
    height: 3px;
    background: linear-gradient(
        to bottom,
        rgba(0, 255, 120, 0) 0%,
        rgba(0, 255, 120, 0.7) 35%,
        rgba(0, 255, 120, 1) 50%,
        rgba(0, 255, 120, 0.7) 65%,
        rgba(0, 255, 120, 0) 100%
    );
    box-shadow: 0 0 5px rgba(0, 255, 120, 0.9);
    animation: scan-line-b-qkqvtk7xtj 2.1s linear infinite;
}

@keyframes scan-line-b-qkqvtk7xtj {
    0%   { top: 10%; opacity: 0; }
    10%  { opacity: 1; }
    50%  { top: 90%; opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 10%; opacity: 0; }
}

/* углы рамки */
.frame-corner[b-qkqvtk7xtj] {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 4px solid #00ff78;
}

.frame-corner.tl[b-qkqvtk7xtj] {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.frame-corner.tr[b-qkqvtk7xtj] {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
}

.frame-corner.bl[b-qkqvtk7xtj] {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
}

.frame-corner.br[b-qkqvtk7xtj] {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

.camera-buttons[b-qkqvtk7xtj] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.camera-textarea[b-qkqvtk7xtj] {
    width: 100%;
    max-width: 450px;
}

/* ====== ЦИФРЫ СЕРИЙНИКА ПОВЕРХ ВИДЕО ====== */

.serial-overlay[b-qkqvtk7xtj] {
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 700;
    color: #00ff78;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    padding: 6px 10px;
    text-align: center;
    pointer-events: none;
}
/* /Pages/Settings.razor.rz.scp.css */
.page[b-w968j5vtu3] {
    max-width: 300px;
    padding-top: calc(50dvh - 300px);
    margin-left: auto;
    margin-right: auto;
    

}

.page2[b-w968j5vtu3] {
    max-width: 600px;
    padding-top: 3dvh;
    margin-left: auto;
    margin-right: auto;
    

}

.password-toggle-btn[b-w968j5vtu3] {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);

    border: none;
    background: transparent;
    padding: 0;
    margin: 0;

    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    color: #666;
}



.password-toggle-btn:hover[b-w968j5vtu3] {
    color: #000;
}


.modal-overlay[b-w968j5vtu3] {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999; /* повышенный z-index */
        padding: 16px;
    }

    .table td[b-w968j5vtu3] {
    vertical-align: middle !important;
}

.form-control[readonly][b-w968j5vtu3] {
    background-color: #fff !important;
    opacity: 1 !important;
}

.btn-close-modal[b-w968j5vtu3] {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    transition: color .2s;
    z-index: 2;                     /* <-- поверх всего внутри карточки */
    pointer-events: auto;           /* <-- гарантируем, что клики доходят */
    width: 40px;                    /* <-- удобная зона клика */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    
    .modal-card[b-w968j5vtu3] {
        background: #fff;
        width: min(560px, 100%);
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0,0,0,.25);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .modal-header[b-w968j5vtu3], .modal-footer[b-w968j5vtu3] {
        padding: 12px 16px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
    }
    .modal-footer[b-w968j5vtu3] { border-top: 1px solid #e9ecef; border-bottom: none; }
    .modal-body[b-w968j5vtu3] { padding: 16px; }

.card-header[b-w968j5vtu3] {
    background: white !important;
    border-bottom: 1px solid black;
}



.form-check[b-w968j5vtu3] {
    margin-left: auto;
    margin-right: 10px;
}



.btn-outline-primary:hover[b-w968j5vtu3] {
    color: #0d6efd !important;
    background-color: transparent !important;
   }
   
   .btn-outline-primary:active[b-w968j5vtu3] {
       background-color: transparent !important;
   }
   
   .btn-primary:hover[b-w968j5vtu3] {
       
       background-color: #0d6efd !important;
      }
   
   .btn-primary:active[b-w968j5vtu3] {
       background-color: #0d6efd !important;
   }

   .btn[b-w968j5vtu3] {
    width: 100%;
    border-radius: 10px;
    }

    

    .select[b-w968j5vtu3] {
        border-radius: 10px;
    }

    @media (max-width: 640px) {
        .mobile[b-w968j5vtu3] {
            margin-left: 5px !important;
            margin-right: 5px !important;
            margin-top: 0px !important;
            margin-bottom: 0px !important;

        }
    }

        @media (min-width: 641px) {
        .mobile[b-w968j5vtu3] {
            margin-left: 30px !important;
            margin-right: 30px !important;
            margin-top: 0px !important;
            margin-bottom: 0px !important;

        }



      }