.hard-wrapper{
    display: flex;
    .hard-left{
        width: 400px;
        .iot-wrapper{
            min-height: 356px;
            margin-bottom: 20px;
            .iot-content{
                padding-left: 32px;
                color: #ffffff;
                font-size: 14px;
                display: flex;
                flex-wrap: wrap;
                .iot-box{
                    cursor: pointer;
                    width: 136px;
                    opacity: 0.5;
                    height: 36px;
                    text-align: center;
                    margin-right: 40px;
                    margin-top: 20px;
                    line-height: 36px;
                    background-image: url("./static/iot-unchecked-bg.png");
                    background-repeat: no-repeat;
                    background-size: 100% auto;
                    background-position: center;
                    &:nth-child(2n+0){
                        margin-right: 0;
                    }
                    &[data-checked="true"]{
                        opacity: 1;
                        background-image: url("./static/checked-iot-title-bg.png");
                    }
                }
            }
        }
        .iot-device-wrapper{
            min-height: 380px;
            background-image: url("./static/checked-iot-bg.png");
            .iot-device-moreInfo{
                font-size: 12px;
                .iot-online{
                    span{
                        color: #1BC794; 
                        font-size: 20px;
                    }
                }
                .iot-offline{
                    padding-left:20px;
                    span{
                        color: #FF5353; 
                        font-size: 20px;
                    }
                }
             
            }
            .device-state-online{
                color: #1BC794;
            }
            .device-state-offline{
                color:#FF5353 ;
            }
        }
    }
    .hard-right{
        flex:1;
        padding-left: 20px;
        box-sizing: border-box;
        .hard-device-content{
            width: 100%;
            height: 100%;
            background-image: url("./static/device-info-bg.png");
            background-size: 100% auto;
            background-repeat: no-repeat;
            background-position: left bottom;
            position: relative;
            .hard-device-header{
                position: absolute;
                left: 0;
                top: 6px;
                display: flex;
                color: #ffffff;
               
                font-size: 14px;
                &>div{
                    background-image: url("./static/tab-unchecked.png");
                    background-size: 100% auto;
                    background-repeat: no-repeat;
                    opacity: 0.5;
                    width: 98px;
                    height: 33px;
                    line-height: 33px;
                    text-align: center;
                    cursor: pointer;
                    &[data-checked="true"]{
                        opacity: 1;
                        background-image: url("./static/tab-checked.png");
                    }
                }
            }
            .hard-info-wrapper{
                padding: 60px 20px 0 20px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                color: #ffffff;
                font-size: 14px;
                .hard-head-mast {
                  position: relative;
                  img {
                    width: 520px;
                    display: block;
                    &.arrow {
                      width: 38px;
                      position: relative;
                      left: 78px;
                    }
                    &.component {
                      width: 43px;
                      position: absolute;
                      top: 80px;
                      right: 170px;
                    }
                  }
                }
                .info-record{
                    width: 222px;
                    height: 40px;
                    margin-bottom: 10px;
                    padding: 0 10px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background-image: url("./static/box-title-bg.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;

                }
            }
           
        }
    }
}