@import url('../../theme.css');
.layout{display:block}.layout>aside{position:fixed;left:0;top:78px;bottom:0;width:218px;padding:14px 10px 0}.layout>main{margin-left:218px;padding:11px 17px 16px 16px;min-height:calc(100vh - 78px);border-radius:6px 0 0;background:#fbfdff}.brand{min-width:0}.top .search{flex:0 1 408px}.heading{height:63px;align-items:flex-start;flex-wrap:nowrap}.heading h1{font-size:25px;margin:0}.heading p{font-size:12px;color:#2c4079;margin:3px 0}.heading>.actions{flex-wrap:nowrap;gap:8px;margin-top:-8px}.heading .btn{white-space:nowrap;font-size:11px}.kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 10px;gap:8px}.kpi{height:95px;align-items:flex-start;gap:16px;padding:12px}.kpi label{font-size:11px;color:#314479}.kpi strong{font-size:22px}.kpi .ico{width:55px;height:54px}.kpi:nth-child(2) .ico{color:#00b67c;background:#e7f8f0}.kpi:nth-child(3) .ico{color:#ffaf16;background:#fff8e9}.kpi:nth-child(4) .ico{color:#ff891a;background:#fff2e8}.kpi:nth-child(5) .ico{color:#0060ff;background:#edf4ff}.grid{display:grid;grid-template-columns:214px minmax(0,1fr) 380px;gap:10px;align-items:start}.grid>div{min-width:0}.panel{box-shadow:none;border:1px solid #e7effa;border-radius:5px;overflow:hidden}.panelhead{padding:8px 11px;min-height:34px}.panelhead h2{font-size:12px}.body{padding:10px}.field{margin:0 0 11px}.field label{font-size:11px;color:#263d79}.field input,.field select{height:30px;padding:5px 8px;font-size:11px}.grid>section .btn{font-size:10px}.grid>section #reset{border:0;background:none;padding:0!important}.grid>section .wide{justify-content:center}.grid>section .field br{display:none}.grid>section #to{margin-top:6px}.hint{font-size:9px}.map-panel>.panelhead{background:#001e39;color:white}.map-panel>.panelhead .hint{color:#d7e8ff;font-size:8px}.map .sijantan-osm-map{height:330px!important;min-height:330px!important}.map .osm-toolbar{font-size:9px;padding:5px 8px}.map .osm-toolbar button,.map .osm-toolbar a{padding:3px 6px}.map .osm-note{font-size:9px;padding:5px 8px}.map .osm-legend{display:none}.mapfoot{padding:6px 10px;font-size:9px}.table-panel>.panelhead{padding:0 8px 0 0}.tabs{display:flex;gap:4px}.tab{font-size:10px;border-radius:4px 4px 0 0;padding:9px 14px}.tabletools{padding:5px 8px;align-items:center}.tabletools input{padding:5px 7px;height:27px;font-size:10px;max-width:70%}.tabletools select{font-size:10px;padding:4px 7px}.tablewrap{padding:0 7px}.tablewrap table{font-size:9px}.tablewrap th{font-size:9px;color:#132655;padding:5px 4px}.tablewrap td{padding:5px 4px}.tablewrap td button{border:0;background:#edf4ff;color:#005dff;padding:3px 6px;border-radius:3px;font-size:9px;margin-right:4px}.tablewrap tr.selected{background:#edf5ff}.tablewrap .status{font-size:8px;padding:2px 5px}.status.ok{background:#d8f7e8;color:#087858}.status.failed{background:#ffe3e5;color:#bd243d}.status.pending{background:#fff1ce;color:#926200}#tableFoot{padding:7px 8px}.right{display:grid;grid-template-columns:1fr;gap:9px}.video{height:220px;background:#001c37}.video:before,.trees{display:none}#previewImage,#previewVideo{width:100%;height:100%;object-fit:cover;display:block}#previewVideo[hidden],#previewImage[hidden]{display:none}.overlay{padding:6px;font-size:9px;z-index:2;background:#00172fc9}.overlay.gps{font-size:8px}.controls{z-index:3;font-size:9px}.controls .progress{cursor:pointer;min-width:30px}.controls button{font-size:15px}.thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:7px}.thumb .scene{height:37px;background:url('../../../images/demo/road-scene.png') center/cover}.thumb:nth-child(3) .scene{background-image:url('../../../images/demo/inspection-pothole.png')}.thumb span{font-size:8px;line-height:1.3;padding:3px 1px}.metadata dl{grid-template-columns:86px 6px minmax(0,1fr);font-size:10px;gap:5px}.metadata dt{color:#2d447b}.metadata dd{color:#263d73}.devices{gap:6px}.device{font-size:9px;padding:8px;border-radius:5px;background:#fcfdff}.device:before{content:'';display:inline-block;width:20px;height:20px;background:url('../../../icons/camera.svg') center/contain no-repeat;vertical-align:middle;margin-right:5px}.device b{font-size:10px;margin:4px 0}.device-state{display:block;color:#697b9b;font-size:9px;margin-top:3px}.chart{height:100px;padding:10px 12px 24px;gap:10px}.chart .bar{position:relative;min-width:0;background:linear-gradient(#1690ff,#0060ff)}.chart .bar small{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font-size:8px;white-space:nowrap;color:#354e82}.chart select{font-size:9px}.pagination{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:8px;font-size:10px}.pagination .btn{padding:3px 8px;font-size:10px}.empty{text-align:center;padding:20px!important;color:#667c9e}.modalback{z-index:1400}.modal{max-height:90vh;overflow:auto;width:min(550px,100%);padding:22px}.modalgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.modal h2{font-size:19px;margin:0 0 15px}.modalfoot{display:flex;justify-content:flex-end;gap:8px}.toast{z-index:1600}.form-error{color:#c42d40;font-size:11px}#preview:fullscreen,#preview.expanded{height:100vh;width:100vw;background:#00162b}#preview:fullscreen #previewImage,#preview:fullscreen #previewVideo,#preview.expanded #previewImage,#preview.expanded #previewVideo{object-fit:contain}#preview.expanded{position:fixed;inset:0;z-index:1300}.preview-caption{font-size:9px;padding:5px 8px;background:#f7faff;color:#3e5583}.local-file-scope{font-size:9px;color:#51719c}.device-status-label{font-size:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:1400px){.heading{height:auto;min-height:84px;display:block}.heading>.actions{margin-top:8px}.grid{grid-template-columns:190px minmax(0,1fr) 330px}.kpi{gap:10px;padding:10px}.kpi .ico{width:45px}.map-panel>.panelhead{flex-wrap:wrap}}
@media(max-width:1150px){.grid{grid-template-columns:190px minmax(0,1fr)}.right{grid-column:1/-1;grid-template-columns:1fr 1fr}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.layout>aside{display:none}.layout>main{margin-left:0;padding:12px 12px 80px}.heading{padding-bottom:12px}.heading>.actions{flex-wrap:wrap}.heading .btn{font-size:10px}.grid{grid-template-columns:180px minmax(0,1fr)}.right{grid-template-columns:1fr 1fr}.top .search{display:none}}
@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.right{grid-column:1;grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi:last-child{grid-column:1/-1}.grid>section>.body{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grid>section .wide,.grid>section .hint{grid-column:1/-1}.field{margin-bottom:0}.video{height:240px}.modalgrid{grid-template-columns:1fr}.overlay{font-size:8px}.kpi strong{font-size:20px}}