.monitor-app{width:min(94%,440px);margin:auto;overflow:hidden;background:#f7f8f7;border:1px solid #d9deda;border-radius:7px;box-shadow:0 28px 60px rgba(0,0,0,.35);color:#25302a}.monitor-windowbar{height:30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 11px;background:#eef1ef;border-bottom:1px solid #d9deda;color:#7a837e}.monitor-windowbar>span{display:flex;gap:5px}.monitor-windowbar i{width:6px;height:6px;border-radius:50%;background:#c1c8c4}.monitor-windowbar i:first-child{background:#d5a198}.monitor-windowbar i:nth-child(2){background:#dfc179}.monitor-windowbar i:last-child{background:#87b99f}.monitor-windowbar small{font-size:7px}.monitor-windowbar>b{justify-self:end;color:#9aa29e;font-size:6px;letter-spacing:.14em}
.monitor-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px}.monitor-head>div{display:flex;align-items:baseline;gap:10px}.monitor-head small{color:#7d8782;font-size:7px;letter-spacing:.08em}.monitor-head strong{color:#19211d;font-size:28px;font-weight:500}.monitor-head em{display:flex;align-items:center;gap:5px;color:#008d6e;font-size:8px;font-style:normal}.monitor-head em i{width:5px;height:5px;background:#00a984;border-radius:50%}
.monitor-trend{height:42px;display:flex;align-items:end;gap:5px;margin:0 18px 14px;padding:5px 8px 0;background:linear-gradient(180deg,#f1f5f3,transparent);border-bottom:1px solid #ccd6d1}.monitor-trend span{flex:1;background:#8bd4c0;border-radius:2px 2px 0 0}.monitor-trend span:nth-child(1){height:42%}.monitor-trend span:nth-child(2){height:55%}.monitor-trend span:nth-child(3){height:48%}.monitor-trend span:nth-child(4){height:67%}.monitor-trend span:nth-child(5){height:61%}.monitor-trend span:nth-child(6){height:74%}.monitor-trend span:nth-child(7){height:70%}.monitor-trend span:nth-child(8){height:82%;background:#00a984}
.monitor-events{border-top:1px solid #e0e4e1}.monitor-events>div{display:grid;grid-template-columns:6px 1fr auto;align-items:center;gap:10px;min-height:49px;padding:8px 18px;border-bottom:1px solid #e6e9e7}.monitor-events>div:last-child{border:0}.monitor-events>div>i{width:5px;height:5px;background:#00a984;border-radius:50%}.monitor-events>div>i.warning{background:#d09a3c}.monitor-events span{display:flex;flex-direction:column;gap:2px}.monitor-events b{font-size:8px;font-weight:600}.monitor-events small{color:#7d8782;font-size:7px}.monitor-events em{color:#008d6e;font-size:7px;font-style:normal}.monitor-events>div:first-child em{color:#9b6818}
@media(max-width:420px){.monitor-app{width:96%}.monitor-head,.monitor-events>div{padding-left:13px;padding-right:13px}.monitor-trend{margin-left:13px;margin-right:13px}}