@import '../../style/index';

.@{prefix-cls}-sbzj {
    height: 800px;
    padding: 10px;
    &-canvas {
        min-width: 100%;
        overflow: auto;
        background: linear-gradient(0deg, #1f5e792c, #02101a27);
        &::-webkit-scrollbar {
            width: 5px;
            height: 5px;
            background-color: transparent;
        }
        &::-webkit-scrollbar-thumb {
            background-color: #636363;
            border-radius: 3px;
            -webkit-box-shadow: inset 0 0 0 transparent;
        }
    }
    &-device {
        position: relative;
        margin: 20px auto 0 100px;
    }
    &-disconnect {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-self: center;
        padding: 30px;
        color: #fff;
    }
    &-content {
        width: 100%;
        margin-top: 10px;
        min-height: 100px;
        overflow: auto;
        background: #1f5e792c;
        padding: 10px 0;
    }
    &-items {
        width: 100%;
        min-height: 200px;
        margin-top: 10px;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
    }
    &-item {
        width: calc(~'50% - 10px');
        height: 166px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid #364e60;
        border-radius: 6px;
        margin: 5px;
        &-title {
            height: 46px;
            line-height: 46px;
            padding-left: 18px;
            color: #fefefe;
            font-weight: 400;
            font-size: 16px;
            font-family: PingFang SC;
            background: rgba(255, 255, 255, 0.05);
            border-bottom: 1px solid #364e60;
        }
        &-content {
            display: flex;
            padding: 10px;
        }
        &-left,
        &-right {
            width: 50%;
            &-item {
                display: flex;
                width: 100%;
            }
        }
    }
    &-left,
    &-right {
        &-label {
            height: 30px;
            line-height: 30px;
            color: #cafdff;
            &-left-value,
            &-right-value {
                color: #e6e6e6;
            }
        }
    }
}
