.light .device-all .state-legend{color:var(--text-color1)}.light .device-all .device-col .single-device{background-color:transparent;border:1px solid #ccc;border-radius:6px}.device-all{height:100%}.device-all .state-legend{padding:15px;display:flex}.device-all .state-legend>div{margin-right:15px;display:flex;align-items:center}.device-all .state-legend>div .state-block{display:inline-block;height:15px;width:15px;margin-right:5px}.device-all .state-legend>div .state-block.unconnect-color{background-color:var(--device-state-unconnect-bg,#a9a9a9)}.device-all .state-legend>div .state-block.normal-color{background-color:var(--device-state-normal-bg,#0ef)}.device-all .state-legend>div .state-block.success-color{background-color:var(--device-state-success-bg,#03b36e)}.device-all .state-legend>div .state-block.warning-color{background-color:var(--device-state-warn-bg,#ff6100)}.device-all .state-legend>div .state-block.danger-color{background-color:var(--device-state-danger-bg,#ff4847)}.device-all .state-legend>div .state-block.fix-color{background-color:var(--device-state-fix-bg,#ffd04f)}.device-all .state-legend>div .state-block.fault-color{background-color:var(--device-state-fault-bg,#fb0)}.device-all .state-legend>div .state-block.collect-color{background-color:var(--device-state-collect-bg,#00a1ff)}.device-all .state-legend>div .state-block.unline-bg-color{background:linear-gradient(180deg,#cbcbcb,#4b4b4b 92%)}.device-all .device-list{height:calc(100% - 60px)}.device-all .device-row{display:flex;justify-content:flex-start;overflow-x:hidden;flex-wrap:wrap}.device-all .device-col{width:20%;max-width:200px;padding:0 15px;box-sizing:border-box}.device-all .device-col .single-device{background-color:var(--device-card-bg);height:60px;margin-bottom:10px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;cursor:pointer}.device-all .device-col .single-device span{display:inline-block;width:80%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.device-all .device-col .single-device span.unconnect-color{color:var(--device-state-unconnect-color,#a9a9a9)}.device-all .device-col .single-device span.normal-color{color:var(--device-state-normal-color,#0ef)}.device-all .device-col .single-device span.success-color{color:var(--device-state-success-color,#03b36e)}.device-all .device-col .single-device span.warning-color{color:var(--device-state-warn-color,#ff6100)}.device-all .device-col .single-device span.danger-color{color:var(--device-state-danger-color,#ff4847)}.device-all .device-col .single-device span.fix-color{color:var(--device-state-fix-color,#ffd04f)}.device-all .device-col .single-device span.fault-color{color:var(--device-state-fault-color,#fb0)}.device-all .device-col .single-device span.collect-color{color:var(--device-state-collect-color,#00a1ff)}.device-all .device-col .single-device.is-active{border:1px solid var(--device-active-border)}