:root{--primary-color: #00549f;--primary-hover: #004080;--primary-color-dark: #003366;--secondary-color: #607890;--success-color: #0d8a6f;--danger-color: #dc3545;--warning-color: #f0a500;--info-color: #0098da;--bg-dark: #0a1929;--bg-medium: #102a43;--bg-light: #1b3a57;--bg-lighter: #2d4a6d;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--border-color: #1b3a57;--border-light: #2d4a6d;--sidebar-width: 260px;--sidebar-collapsed-width: 78px;--sidebar-bg: #102a43;--sidebar-hover-bg: #1d1b31;--text-color: #fff;--transition-speed: .5s;--active-link-color: #0088cc;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--border-radius-sm: .25rem;--border-radius-md: .5rem;--border-radius-lg: .75rem;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--settings-header-height: 48px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--bg-dark);color:var(--text-primary);line-height:1.5}.camtelli-wrapper{min-height:100vh;display:flex;flex-direction:column}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-xl);background-color:var(--bg-medium);border-bottom:1px solid var(--border-color);min-height:var(--settings-header-height)}.logo-container{display:flex;align-items:center;gap:var(--spacing-md)}.logo-container i{font-size:1.8rem;color:var(--primary-color)}.logo-container h1{font-size:1.5rem;font-weight:600}.logo-link{display:inline-flex;align-items:center}.logo-img{max-height:calc(var(--settings-header-height) * .85);height:auto;width:auto;display:block}.license-badge{margin-left:10px;padding:2px 6px;border-radius:4px;font-size:12px;color:#fff}.license-badge.ok{background:#2e7d32}.license-badge.bad{background:#b71c1c}.user-info{display:flex;align-items:center;gap:var(--spacing-md)}.user-name{font-weight:500}.user-avatar{width:2.5rem;height:2.5rem;border-radius:50%;background-color:var(--primary-color);display:flex;align-items:center;justify-content:center;color:#fff;position:relative}.user-avatar i{font-size:1.2rem}.avatar-button{width:100%;height:100%;border:none;background:transparent;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}.avatar-button img{display:block;width:80%;height:80%;object-fit:cover;border-radius:50%}.witness-timer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:1.4rem;padding:0 .2rem;border-radius:999px;background-color:var(--bg-dark);color:var(--text-primary);font-size:.7rem;font-weight:600;text-align:center;line-height:1.4;box-shadow:var(--shadow-sm)}.avatar-menu{position:absolute;top:calc(100% + var(--spacing-xs));right:0;background-color:var(--bg-light);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);box-shadow:var(--shadow-md);min-width:9rem;z-index:1000;padding:var(--spacing-xs) 0}.avatar-menu button{width:100%;padding:var(--spacing-xs) var(--spacing-md);border:none;background:transparent;color:var(--text-primary);text-align:left;font-size:.85rem;cursor:pointer;display:block}.avatar-menu button:hover{background-color:var(--bg-lighter)}.settings-main{display:flex;flex:1}.settings-content{flex:1;padding:var(--spacing-xl);overflow-y:auto}.settings-panel{display:none}.settings-panel.active{display:block}.settings-panel h2{margin-bottom:var(--spacing-xl);font-weight:600;color:var(--text-primary);font-size:1.5rem}.settings-card{background-color:var(--bg-medium);border-radius:var(--border-radius-md);border:1px solid var(--border-color);margin-bottom:var(--spacing-xl);overflow:hidden}.settings-card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color);background-color:var(--bg-light)}.settings-card-header h3{font-size:1.1rem;font-weight:500}.settings-card-body{padding:var(--spacing-lg)}.btn-icon{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--text-secondary);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast)}.btn-icon:hover{background-color:var(--bg-lighter);color:var(--text-primary)}.refresh-btn,.help-btn,.add-btn{background-color:transparent;border:none;color:var(--text-secondary);cursor:pointer;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color var(--transition-fast),color var(--transition-fast)}.refresh-btn:hover,.help-btn:hover{background-color:var(--bg-lighter);color:var(--text-primary)}.add-btn{color:var(--success-color)}.add-btn:hover{background-color:#10b98133;color:var(--success-color)}.btn-save{background-color:var(--primary-color);color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-md);font-weight:500;cursor:pointer;transition:background-color var(--transition-fast)}.btn-save:hover{background-color:var(--primary-hover)}.btn-cancel,.btn-close{background-color:var(--bg-lighter);color:var(--text-primary);border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-md);font-weight:500;cursor:pointer;transition:background-color var(--transition-fast)}.btn-cancel:hover,.btn-close:hover{background-color:var(--secondary-color)}.btn-secondary{background:linear-gradient(180deg,#00549f33,#00549f1f);color:var(--text-primary);border:1px solid rgba(96,120,144,.45);border-top-color:#cbd5e12e;border-radius:999px;padding:.38rem .8rem;font-size:.78rem;font-weight:600;line-height:1;letter-spacing:.01em;cursor:pointer;box-shadow:inset 0 1px #f8fafc0f,0 1px 2px #00000038;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.btn-secondary:hover{background:linear-gradient(180deg,#00549f4d,#00549f2e);border-color:#0098da8c;color:#fff;box-shadow:inset 0 1px #f8fafc1a,0 4px 10px #00000038;transform:translateY(-1px)}.btn-secondary:active{transform:translateY(0);box-shadow:inset 0 1px 2px #00000040,0 1px 3px #0000002e}.btn-secondary:focus-visible{outline:none;border-color:var(--info-color);box-shadow:0 0 0 3px #0098da38,inset 0 1px #f8fafc14}.btn-secondary:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--spacing-lg)}.info-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.info-label{color:var(--text-muted);font-size:.9rem}.info-value{font-weight:500;font-size:1.1rem}.progress-container{width:100%;height:auto;background-color:var(--bg-light);border-radius:var(--border-radius-sm);overflow:hidden;margin-top:var(--spacing-xs);box-shadow:inset 0 1px 3px #0000001a;padding:var(--spacing-xs)}.search-status-text{font-size:.9rem;margin-bottom:var(--spacing-xs);color:var(--text-secondary)}.progress-bar{height:1rem;background-color:var(--primary-color);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem;border-radius:var(--border-radius-sm);text-align:center;font-size:.75rem;color:#fff;line-height:1rem;transition:width .3s ease;animation:progress-bar-stripes 1s linear infinite}.progress-label{font-weight:500;margin-bottom:var(--spacing-xs)}.search-summary-box{background-color:var(--bg-light);border-radius:var(--border-radius-sm);padding:var(--spacing-md);margin-top:var(--spacing-xs);border:1px solid var(--border-light)}.search-summary-box #cameras-found{font-size:1.1rem;font-weight:500;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.search-summary-box #search-details{font-size:.9rem;color:var(--text-secondary)}.search-results-summary{margin-top:var(--spacing-md)}@keyframes progress-bar-stripes{0%{background-position:1rem 0}to{background-position:0 0}}.settings-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.capability-list .form-group{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm)}.capability-list .form-group:nth-child(odd){background-color:var(--bg-light)}.capability-list .form-group:nth-child(2n){background-color:var(--bg-medium)}.form-group label{font-weight:500;color:var(--text-secondary)}.modern-input,.modern-select{background-color:var(--bg-light);border:1px solid var(--border-light);color:var(--text-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-md);font-size:1rem;transition:border-color var(--transition-fast)}.modern-input:focus,.modern-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #2563eb33}.modern-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;padding-right:2.5rem}.input-with-unit{display:flex;align-items:center}.input-unit{background-color:var(--bg-lighter);padding:var(--spacing-sm) var(--spacing-md);border-radius:0 var(--border-radius-md) var(--border-radius-md) 0;color:var(--text-secondary);border:1px solid var(--border-light);border-left:none}.input-with-unit .modern-input{border-radius:var(--border-radius-md) 0 0 var(--border-radius-md)}.form-actions{display:flex;justify-content:flex-end;gap:var(--spacing-md);margin-top:var(--spacing-md)}.toggle-container{display:flex;justify-content:space-between;align-items:center}.toggle{position:relative;display:inline-block;width:3rem;height:1.5rem}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:var(--bg-light);transition:var(--transition-normal);border-radius:1.5rem}.toggle-slider:before{position:absolute;content:"";height:1.1rem;width:1.1rem;left:.2rem;bottom:.2rem;background-color:var(--text-secondary);transition:var(--transition-normal);border-radius:50%}input:checked+.toggle-slider{background-color:var(--primary-color)}input:checked+.toggle-slider:before{transform:translate(1.5rem);background-color:#fff}.camera-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--spacing-lg)}.camera-card{background-color:var(--bg-light);border-radius:var(--border-radius-md);overflow:hidden;border:1px solid var(--border-color)}.camera-preview{position:relative;height:180px;overflow:hidden}.camera-preview img{width:100%;height:100%;object-fit:cover}.camera-status{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:.8rem;font-weight:500}.camera-status.online{background-color:#10b98133;color:var(--success-color)}.camera-status.offline{background-color:#ef444433;color:var(--danger-color)}.camera-info{padding:var(--spacing-md)}.camera-info h4{margin-bottom:var(--spacing-xs);font-weight:500}.camera-info p{color:var(--text-muted);font-size:.9rem;margin-bottom:var(--spacing-md)}.camera-actions{display:flex;gap:var(--spacing-sm)}.storage-overview{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg)}.storage-chart-container{width:100%;height:250px}.storage-stats{display:flex;flex-direction:column;gap:var(--spacing-md)}.stat-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.stat-label{color:var(--text-muted);font-size:.9rem}.stat-value{font-weight:500;font-size:1.1rem}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000;align-items:center;justify-content:center}.modal.active{display:flex}.modal-content{background-color:var(--bg-medium);border-radius:var(--border-radius-lg);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color)}.modal-header h3{font-size:1.2rem;font-weight:500}.close-modal{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;transition:background-color var(--transition-fast),color var(--transition-fast)}.close-modal:hover{background-color:var(--bg-lighter);color:var(--text-primary)}.modal-body{padding:var(--spacing-lg);flex:1;overflow-y:auto}.modal-footer{display:flex;justify-content:flex-end;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--border-color)}.help-content{display:flex;flex-direction:column;gap:var(--spacing-md)}.help-note{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);background-color:#3b82f61a;border-radius:var(--border-radius-md);border-left:3px solid var(--info-color)}.help-note i{color:var(--info-color);font-size:1.2rem;margin-top:.2rem}[data-tooltip]{position:relative}[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:var(--bg-dark);color:var(--text-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:.8rem;white-space:nowrap;z-index:10;margin-bottom:var(--spacing-xs);box-shadow:var(--shadow-md)}.toast-container{position:fixed;bottom:var(--spacing-lg);right:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);z-index:1000}.toast{background-color:var(--bg-medium);border-left:4px solid var(--primary-color);border-radius:var(--border-radius-md);padding:var(--spacing-md) var(--spacing-lg);box-shadow:var(--shadow-lg);display:flex;align-items:flex-start;gap:var(--spacing-md);min-width:300px;max-width:450px;animation:slideIn .3s ease,fadeOut .3s ease 4.7s forwards}.toast.success{border-left-color:var(--success-color)}.toast.error{border-left-color:var(--danger-color)}.toast.warning{border-left-color:var(--warning-color)}.toast.info{border-left-color:var(--info-color)}.toast-icon{font-size:1.2rem}.toast.success .toast-icon{color:var(--success-color)}.toast.error .toast-icon{color:var(--danger-color)}.toast.warning .toast-icon{color:var(--warning-color)}.toast.info .toast-icon{color:var(--info-color)}.toast-content{flex:1}.toast-title{font-weight:500;margin-bottom:var(--spacing-xs)}.toast-message{font-size:.9rem;color:var(--text-secondary);line-height:1.4;max-height:150px;overflow-y:auto;white-space:pre-line}.toast-close{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.toast.multiline{animation:slideIn .3s ease,fadeOut .3s ease 6.7s forwards}.toast.multiline .toast-message{margin-top:var(--spacing-sm);padding-right:var(--spacing-sm)}@media (max-width: 1024px){.storage-overview{grid-template-columns:1fr}}@media (max-width: 768px){.settings-main{flex-direction:column}.settings-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border-color)}.settings-nav{display:flex;overflow-x:auto;padding:var(--spacing-sm)}.settings-nav li{padding:var(--spacing-sm) var(--spacing-md);white-space:nowrap}.settings-nav li.active{border-left:none;border-bottom:3px solid var(--primary-color)}.info-grid{grid-template-columns:1fr}}@media (max-width: 480px){.settings-header{flex-direction:column;gap:var(--spacing-md);text-align:center}.camera-grid{grid-template-columns:1fr}.modal-content{width:95%}}.login form{position:absolute;height:410px;width:400px;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;background-color:#1d1b31;border:3px solid #3b3a42;border-radius:30px;letter-spacing:.6px;padding:10px 30px 20px}.login form label,.login form a{color:#fffffff2}.login form h3{color:#fffffff2;font-size:30px;font-weight:450}.login label{display:block;margin-top:20px;font-size:15px;font-weight:450}.login input{display:block;height:40px;width:100%;color:#fffffff2;background-color:#2f2d41;border-radius:4px;padding:0 10px;margin-top:5px;font-size:15px;border:none;outline:none}login input::placeholder{color:#fffffff2}.login button{margin:40px 0 5px;width:100%;background-color:#ffffffed;color:#1d1b31;padding:10px 0;font-size:20px;font-weight:450;border-radius:10px}.login button:hover{background-color:#fff}tr:nth-child(2n){background-color:#00549f1f}.container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.timepicker_container{background:linear-gradient(#00549f1f,#00549fbd);display:flex;flex-direction:column;padding:1rem}.timepicker_week_container{display:flex}.timepicker_blind{width:100px;height:25px;margin:2px}.timepicker_weekday{width:100px;border:solid 1px white;color:#00549f;display:flex;justify-content:center;align-items:center;margin:2px}.timepicker_hour{display:flex}.timepicker_time{width:100px;height:25px;color:#fff;background-color:#00549f;text-align:center;display:flex;justify-content:center;align-items:center;margin:2px;font-size:14px}.task{background-color:#fff;height:25px;width:100px;margin:2px;cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:2rem}.nvr-wrapper{height:calc(100vh - 30px);display:grid;position:relative;box-sizing:border-box;grid-template-columns:minmax(160px,var(--menu-width, 160px)) auto;grid-template-rows:minmax(0,1fr);max-height:calc(100vh - 30px);background:#0b0b1af2;box-shadow:inset 0 0 30px #0000004d}.nvrMenu{grid-column:1 / 2;grid-row:1 / 2;overflow-y:auto;overflow-x:visible;scrollbar-width:none;position:relative;transition:width .1s ease;resize:horizontal;border-right:1px solid rgba(94,94,153,.2);box-shadow:2px 0 8px #0006;padding-right:10px}.nvrMenu::-webkit-scrollbar{display:none;width:6px}.nvrMenu::-webkit-scrollbar-track{background:#11101db3}.nvrMenu::-webkit-scrollbar-thumb{background:#5e5e9980;border-radius:3px}.nvrMenu::-webkit-scrollbar-thumb:hover{background:#5e5e99b3}.nvr-menu-toggle-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:1050;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease,left .3s ease}.nvr-menu-toggle-btn:hover{background-color:#ffffff40}.nvr-menu-toggle-btn img{width:14px;height:14px;filter:invert(1);transition:transform .3s ease;transform:rotate(90deg)}.nvr-wrapper.menu-collapsed{grid-template-columns:0px auto}.nvr-wrapper.menu-collapsed .nvrMenu{display:none}.nvr-wrapper.menu-collapsed .nvr-menu-toggle-btn img{transform:rotate(-90deg)}.menu-resize-handle{position:absolute;top:0;right:1px;width:4px;height:100%;cursor:col-resize;z-index:100;background:#0b0b1af2;border-right:1px solid rgba(94,94,153,.5);transition:background-color .2s ease,background .2s ease}.menu-resize-handle:hover,.menu-resize-handle.active{background-color:#5e5e99cc;background:#5e5e99cc}.nvrMenuElement{display:grid;grid-template-columns:calc(100% - 35px) 35px;grid-template-rows:20px 27px 27px 14px;background:linear-gradient(to bottom,#232342,#1d1b31);border-radius:3px;box-shadow:0 2px 5px #0003;overflow:hidden;transition:all .2s ease;margin:8px 4px;border:1px solid rgba(94,94,153,.2);width:calc(100% - 8px)}.nvrMenuElement:hover{transform:translateY(-2px);box-shadow:0 3px 8px #0000004d;border-color:#5e5e9966}.thumb{grid-column:1 / 2;grid-row:1 / 5;width:100%;overflow:hidden;position:relative;height:100%}.thumb img{width:100%;height:auto;object-fit:cover;transition:transform .3s ease;height:100%}.nvrMenuElement:hover .thumb img{transform:scale(1.03)}.group-button-container{margin:5px;display:flex;align-items:center;padding:0;transition:all .2s ease;position:relative}.grp-name{background:linear-gradient(to right,#2e2e4a,#212146);color:#fff;border-radius:3px;padding:6px 10px;flex:1;min-width:0;transition:background .2s ease,box-shadow .2s ease,border-color .2s ease;box-shadow:0 1px 3px #0003;border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;overflow:hidden;cursor:pointer;font-size:15px;font-weight:500}.grp-name:hover{background:linear-gradient(to right,#3a3a5a,#2a2a56);box-shadow:0 2px 4px #0000004d;border-color:#ffffff1a}.grp-name-edit-btn{width:0;height:24px;padding:2px;border-radius:50%;background-color:#3a4ed5;border:1px solid rgba(255,255,255,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease,width .3s ease,background-color .3s ease,margin-left .3s ease;box-shadow:0 0 0 2px #0000004d;will-change:opacity,width,margin-left;margin-left:0;overflow:hidden}.grp-name-edit-btn img{width:16px;height:16px;filter:brightness(2)}.group-button-container:hover .grp-name-edit-btn{opacity:1;width:24px;margin-left:5px;pointer-events:auto}.grp-name-edit-btn:hover{opacity:1!important;background-color:var(--primary-color);transform:scale(1.05);pointer-events:auto!important}.grp-name.active{background:linear-gradient(to right,#3f3f87,#323278);border-left:3px solid #5c5cd6;box-shadow:0 2px 8px #0006;transform:translateY(-1px)}.grp-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;padding-right:5px}.cameraTitle{grid-column:1 / 3;grid-row:1 / 2;height:20px;z-index:+1;background:linear-gradient(to right,#242448e6,#1d1b31cc);color:#fff;padding:0 8px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-bottom:1px solid rgba(94,94,153,.3);cursor:pointer;transition:background .2s ease}.cameraTitle:hover{background:linear-gradient(to right,#2e2e5ce6,#272545cc);color:#fff}.videoButtonOne{grid-column:2 / 3;grid-row:2 / 3;display:flex;justify-content:center;align-items:center}.videoButtonTwo{grid-column:2 / 3;grid-row:3 / 4;position:relative;display:flex;justify-content:center;align-items:center}.liveButton{padding:12px;border:0;color:transparent;background-color:transparent;background-image:url(../images/cam-60.svg);background-size:cover;opacity:.7;transition:all .2s ease;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));max-width:100%;box-sizing:border-box}.liveButton:hover,.playButton:hover{opacity:1;transform:scale(1.05);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)) brightness(1.2)}.playButton{padding:12px;border:0;color:transparent;background-color:transparent;background-image:url(../images/play-60.svg);background-size:cover;opacity:.7;transition:all .2s ease;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));max-width:100%;box-sizing:border-box}.removeButton{position:absolute;z-index:+2;border:0;color:transparent;background-color:#500000e6;background-image:url(../images/delete-60.svg);background-size:cover;visibility:hidden;opacity:.7;transition:all .2s ease;border-radius:50%;padding:12px;box-shadow:0 2px 5px #0006}.removeButton:hover{opacity:1;transform:scale(1.1);background-color:#500000e6}.videoPanel{grid-column:2 / 3;grid-row:1 / 2;height:100%;width:100%;max-width:100%;position:relative;flex-wrap:wrap;overflow:hidden;background:#ffffff12}.videoLive{margin:0 auto;height:100%;flex:1;width:100%;max-width:calc(100% - 10px);object-fit:contain;display:block}.videoLive.playBack{height:calc(100% - 120px);min-height:0;flex:none}.remove{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden}.groupPanel{height:100%;min-height:0;width:100%;max-width:100%;max-height:100%;box-sizing:border-box;overflow:hidden;position:relative;align-content:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start;padding:10px;box-shadow:inset 0 0 40px #0006;border-radius:4px}.grpEl{background-color:#ffffff0d!important;border:1px solid rgba(120,120,180,.2)!important;box-shadow:0 1px 2px #0000001a!important;border-radius:3px!important;margin:5px!important;position:relative!important;display:flex!important;justify-content:center!important;align-items:center!important;object-fit:cover!important;object-position:50% 0%!important;box-sizing:border-box!important;min-width:0}.grpEl:hover{box-shadow:0 3px 8px #0000004d;border-color:#5e5e9966}.grpCam-placeholder{position:absolute;top:0;left:0;background-size:cover;background-position:center center;filter:blur(4px) brightness(.7);z-index:5;transition:opacity .5s ease}.grpElOverlay{position:absolute;z-index:+1;height:25px;border-radius:5px;padding:2px 0 0 6px;color:#fff;visibility:hidden;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 2px 6px #0000004d;border:1px solid rgba(255,255,255,.1);transition:opacity .2s ease,visibility .2s ease;font-size:13px;background:linear-gradient(to right,#1d1b45cc,#1d1b3199)}.draggable{cursor:move}.draggable.dragging{opacity:.5}.vis-timeline{border:0!important}.vis-item.vis-background{background-color:#adff2f!important;color:#adff2f!important;border-radius:0!important}.vis-item{border-color:#1d1b31;background-color:#1d1b31}.vis-foreground .vis-group{border-bottom:0px!important}.vis-time-axis .vis-grid.vis-vertical{position:absolute;border-width:3px!important;border-left-style:solid!important;border-image:linear-gradient(to bottom,red,#0000) 1 100%}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-top{border-left-style:hidden!important;border-right-style:hidden!important}.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right{border-top-style:hidden!important;border-image:linear-gradient(to right,#3acfd5,#3a4ed5) 1!important;border-width:3px!important;border-bottom-style:solid!important}@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap);.sidebar *{box-sizing:border-box;font-family:Poppins,sans-serif}.sidebar{display:flex;flex-direction:column;width:var(--sidebar-width);background:var(--bg-medium);border-right:1px solid var(--border-color);padding:var(--spacing-md) 0;min-height:100vh;z-index:100;transition:width var(--transition-speed) ease}.sidebar.close{width:var(--sidebar-collapsed-width)}.sidebar.close .logo-details .logo_name{opacity:0;pointer-events:none;transition-delay:0s}.sidebar .nav-links{height:100%;padding:30px 0 100px;overflow:auto;scrollbar-width:none}.sidebar .nav-links::-webkit-scrollbar{display:none}.sidebar.close .nav-links{overflow:visible}.sidebar .nav-links li{position:relative;list-style:none;transition:background .4s ease}.sidebar .nav-links li:hover{background-color:var(--bg-light);color:var(--text-primary)}.sidebar .nav-links li .icon-link{display:flex;align-items:center;justify-content:space-between}.sidebar.close .nav-links li .icon-link{display:block}.sidebar .nav-links li img{height:50px;min-width:var(--sidebar-collapsed-width);padding:10px;text-align:center;line-height:50px;color:var(--text-color);font-size:20px;cursor:pointer;transition:all .3s ease}.navigation-icon{width:25px;height:25px}img.arrow{padding:17px!important;text-align:left!important;transition:transform .3s ease}.sidebar .nav-links li.showMenu img.arrow{transform:rotate(-180deg)}.sidebar.close .nav-links img.arrow{display:none}.sidebar .nav-links li a{display:flex;align-items:center;text-decoration:none}.sidebar .nav-links li a.active,.sidebar .nav-links li a:hover{opacity:1}.sidebar .nav-links li div.active{background-color:var(--bg-light);color:var(--primary-color);border-left:3px solid var(--primary-color)}.sidebar .nav-links li a .link_name{font-size:18px;font-weight:400;color:var(--text-color);transition:opacity .4s ease}.sidebar.close .nav-links li a .link_name{opacity:0;pointer-events:none}.sidebar .nav-links li .sub-menu{padding:6px 6px 14px 80px;margin-top:-10px;background-color:var(--bg-light);color:var(--primary-color);border-left:3px solid var(--primary-color);display:none}.sidebar .nav-links li.showMenu .sub-menu{display:block}.sidebar .nav-links li .sub-menu a{color:var(--text-color);font-size:15px;padding:5px 0;white-space:nowrap;opacity:.6;transition:opacity .3s ease}.sidebar .nav-links li .sub-menu a:hover{opacity:1}.sidebar .nav-links li .sub-menu a.active{opacity:1;font-weight:500;background-color:#ffffff0d}.sidebar.close .nav-links li .sub-menu{position:absolute;left:100%;top:-10px;margin-top:0;padding:10px 20px;border-radius:0 6px 6px 0;opacity:0;display:block;pointer-events:none;transition:0s;background:var(--sidebar-hover-bg);box-shadow:0 5px 10px #0000004d}.sidebar.close .nav-links li:hover .sub-menu{top:0;opacity:1;pointer-events:auto;transition:all .4s ease}.sidebar .nav-links li .sub-menu .link_name{display:none}.sidebar.close .nav-links li .sub-menu .link_name{font-size:18px;opacity:1;display:block}.sidebar .nav-links li .sub-menu.blank{opacity:1;pointer-events:auto;padding:3px 20px 6px 16px;opacity:0;pointer-events:none}.sidebar .nav-links li:hover .sub-menu.blank{top:50%;transform:translateY(-50%)}.sidebar .footer{position:fixed;bottom:0;width:var(--sidebar-width);display:flex;align-items:center;justify-content:space-between;background:var(--bg-medium);padding:12px 0;transition:all var(--transition-speed) ease;border:1px solid var(--border-color)}.sidebar.close .footer{background:none;width:var(--sidebar-collapsed-width)}.sidebar .footer button{background:none;border:none;color:var(--text-color);cursor:pointer;padding:8px 12px;border-radius:4px;transition:background .3s ease}.sidebar .footer button:hover{background:#ffffff1a}.clear{clear:both}@media (max-width: 400px){.sidebar.close.small-screen{width:0}.sidebar.close.small-screen~.home-section{width:100%;left:0;z-index:100}.bx-menu{display:block!important}.sidebar.close .nav-links li .sub-menu{position:fixed;left:0;top:auto;width:100%;border-radius:0}}.user-list{display:flex;flex-direction:column;width:100%;border-radius:var(--border-radius-md);overflow:hidden}.list-header{display:grid;grid-template-columns:repeat(var(--column-count),1fr) 90px;background-color:var(--bg-light);padding:var(--spacing-md);font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border-color)}.list-item{display:grid;grid-template-columns:repeat(var(--column-count),1fr) 90px;padding:var(--spacing-md);border-bottom:1px solid var(--border-color);align-items:center;transition:background-color var(--transition-fast)}.list-item span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list-item:hover{background-color:var(--bg-light)}.list-item:last-child{border-bottom:none}.list-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end}@media (max-width: 768px){.list-header,.list-item{grid-template-columns:repeat(2,1fr) 120px}.list-header span:nth-child(3),.list-header span:nth-child(4),.list-item span:nth-child(3),.list-item span:nth-child(4){display:none}}@media (max-width: 480px){.list-header,.list-item{grid-template-columns:1fr 120px}.list-header span:nth-child(2),.list-item span:nth-child(2){display:none}}.list-item.unsaved{background-color:#f0a5001a;border-left:3px solid var(--warning-color)}.list-item.unsaved:hover{background-color:#f0a50033}.action-btn.add-camera{color:var(--success-color)}.action-btn.add-camera:hover{background-color:#0d8a6f1a}@media (max-width: 768px){.list-header,.list-item{grid-template-columns:1fr 1fr 1fr 120px}.list-header span:nth-child(3),.list-item span:nth-child(3){display:none}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin-animation{animation:spin 1s linear infinite}.input-group{display:flex;align-items:center;gap:var(--spacing-xs)}.input-group .modern-select{flex:1;min-width:0}.input-group .modern-input{flex:1}.stream-mode-toggle.active{background-color:var(--bg-lighter);color:var(--text-primary)}.input-separator{color:var(--text-secondary);font-weight:500;padding:0 var(--spacing-xs)}.form-helper-text{color:var(--text-muted);font-size:.8rem;margin-top:4px}.compact-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background-color:var(--bg-medium);border-bottom:1px solid var(--border-color);height:30px;min-height:30px;max-height:30px;overflow:hidden}.compact-header .header-left{display:flex;align-items:center;gap:8px}.compact-header .header-left a{display:inline-flex;align-items:center;justify-content:center;height:100%}.compact-header h2{margin:0;font-size:18px;font-weight:600}.header-controls{display:flex;gap:10px}.btn-fullscreen{background:transparent;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:5px;border-radius:3px}.btn-fullscreen:hover{background:#ffffff1a}.btn-fullscreen img{filter:invert(1)}#toggleSequencer img{filter:none}.menu-header{background:linear-gradient(to right,#1a1a2e,#232342)!important;padding-top:10px;padding-bottom:10px;padding-left:5px;padding-right:30px!important;border-bottom:1px solid rgba(120,120,180,.3)!important;margin-bottom:10px!important;cursor:pointer;user-select:none;position:relative;transition:background .2s ease;box-shadow:0 2px 4px #0003;letter-spacing:.05em;text-transform:uppercase;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}.menu-header:before{content:"";display:block;height:1px;background:linear-gradient(to right,transparent,rgba(94,94,153,.5),transparent);position:absolute;width:80%;left:10%;top:0}.menu-header:hover{background:linear-gradient(to right,#212146,#2a2a54)!important;box-shadow:0 4px 8px #0000004d}.menu-header-icon{width:13px;height:13px;position:absolute;top:50%;transform:translateY(-50%)}.menu-header-chevron{right:10px;transition:transform .2s ease}.menu-header-action-button{right:35px;cursor:pointer}@keyframes attention-pulse{0%,to{transform:translateY(-50%) scale(1);filter:brightness(1.2) drop-shadow(0 0 2px rgba(200,220,255,.6))}25%{transform:translateY(-50%) scale(1.25);filter:brightness(1.8) drop-shadow(0 0 16px rgba(220,240,255,1)) drop-shadow(0 0 24px rgba(180,220,255,.8))}50%{transform:translateY(-50%) scale(1.3);filter:brightness(2) drop-shadow(0 0 20px rgba(255,255,220,1)) drop-shadow(0 0 32px rgba(255,240,180,.9)) drop-shadow(0 0 40px rgba(255,220,140,.7))}75%{transform:translateY(-50%) scale(1.25);filter:brightness(1.8) drop-shadow(0 0 16px rgba(220,240,255,1)) drop-shadow(0 0 24px rgba(180,220,255,.8))}}@keyframes attention-glow-ring{0%{box-shadow:0 0 5px 2px #c8dcff99,0 0 10px 5px #b4d2ff66;background:radial-gradient(circle,rgba(200,220,255,.4) 0%,rgba(160,190,255,.2) 40%,transparent 70%)}25%{box-shadow:0 0 20px 10px #dcf0ff,0 0 35px 18px #c8e6ffcc,0 0 50px 25px #b4dcff80;background:radial-gradient(circle,rgba(220,240,255,.6) 0%,rgba(180,220,255,.4) 40%,transparent 70%)}50%{box-shadow:0 0 25px 12px ivory,0 0 45px 22px #fffac8,0 0 65px 32px #fff0a0cc,0 0 85px 42px #ffe67880;background:radial-gradient(circle,rgba(255,255,220,.7) 0%,rgba(255,240,180,.5) 40%,transparent 70%)}75%{box-shadow:0 0 20px 10px #dcf0ff,0 0 35px 18px #c8e6ffcc,0 0 50px 25px #b4dcff80;background:radial-gradient(circle,rgba(220,240,255,.6) 0%,rgba(180,220,255,.4) 40%,transparent 70%)}to{box-shadow:0 0 5px 2px #c8dcff99,0 0 10px 5px #b4d2ff66;background:radial-gradient(circle,rgba(200,220,255,.4) 0%,rgba(160,190,255,.2) 40%,transparent 70%)}}@keyframes attention-ripple{0%{transform:translate(-50%,-50%) scale(.8);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.4);opacity:.3}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.menu-header-action-button.attention-pulse{animation:attention-pulse 2.5s ease-in-out infinite}.menu-header-action-button.attention-pulse:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300%;height:300%;border-radius:50%;animation:attention-glow-ring 2.5s ease-in-out infinite;pointer-events:none;z-index:-1}.menu-header-action-button.attention-pulse:after{content:"";position:absolute;top:50%;left:50%;width:150%;height:150%;border-radius:50%;border:2px solid rgba(58,140,255,.6);animation:attention-ripple 2.5s ease-out infinite;pointer-events:none;z-index:-2}@keyframes attention-pulse-inline{0%,to{transform:scale(1);filter:brightness(1.2) drop-shadow(0 0 2px rgba(200,220,255,.6))}25%{transform:scale(1.2);filter:brightness(1.8) drop-shadow(0 0 12px rgba(220,240,255,1)) drop-shadow(0 0 20px rgba(180,220,255,.8))}50%{transform:scale(1.25);filter:brightness(2) drop-shadow(0 0 16px rgba(255,255,220,1)) drop-shadow(0 0 28px rgba(255,240,180,.9)) drop-shadow(0 0 36px rgba(255,220,140,.7))}75%{transform:scale(1.2);filter:brightness(1.8) drop-shadow(0 0 12px rgba(220,240,255,1)) drop-shadow(0 0 20px rgba(180,220,255,.8))}}@keyframes attention-glow-background-inline{0%,to{background:radial-gradient(circle at center,rgba(200,220,255,.4) 0%,rgba(180,210,255,.2) 30%,transparent 60%)}25%{background:radial-gradient(circle at center,rgba(220,240,255,.6) 0%,rgba(200,230,255,.4) 30%,rgba(180,220,255,.2) 50%,transparent 70%)}50%{background:radial-gradient(circle at center,rgba(255,255,220,.7) 0%,rgba(255,240,180,.5) 30%,rgba(255,230,160,.3) 50%,transparent 70%)}75%{background:radial-gradient(circle at center,rgba(220,240,255,.6) 0%,rgba(200,230,255,.4) 30%,rgba(180,220,255,.2) 50%,transparent 70%)}}@keyframes attention-ring-inline{0%{box-shadow:0 0 8px 4px #c8dcff99,0 0 15px 8px #b4d2ff66}25%{box-shadow:0 0 18px 9px #dcf0ff,0 0 30px 15px #c8e6ffcc,0 0 45px 22px #b4dcff80}50%{box-shadow:0 0 22px 11px ivory,0 0 40px 20px #fffac8,0 0 60px 30px #fff0a0cc,0 0 80px 40px #ffe67880}75%{box-shadow:0 0 18px 9px #dcf0ff,0 0 30px 15px #c8e6ffcc,0 0 45px 22px #b4dcff80}to{box-shadow:0 0 8px 4px #c8dcff99,0 0 15px 8px #b4d2ff66}}.attention-pulse-inline{position:relative;animation:attention-pulse-inline 2.5s ease-in-out infinite}.attention-pulse-inline:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:350%;height:350%;border-radius:50%;animation:attention-glow-background-inline 2.5s ease-in-out infinite,attention-ring-inline 2.5s ease-in-out infinite;pointer-events:none;z-index:-1}.compact-header-group-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-weight:500;padding:5px 10px;background-color:#2a2a4a;border-radius:3px;font-size:15px;z-index:10;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mjpeg-error-overlay{position:absolute;top:10px;left:10px;background-color:#000000b3;color:#f55;padding:5px 10px;border-radius:3px;font-size:12px;z-index:100;pointer-events:none;opacity:1;transition:opacity .5s ease}.action-btn{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--text-secondary);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast)}.action-btn:hover{background-color:var(--bg-lighter);color:var(--text-primary)}