.df-condition {
    padding: 10px;
    &-head {
        width: 100%;
    }
    &-chart {
        height: 440px;
    }
    &-table {
        height: 480px;
    }
    &-trend {
        width: 100%;
        &-head {
            height: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .environment-monitor {
        padding: 10px 16px;
        border: 1px solid var(--bg-border-color2);

        background-color: var(--bg-color2);
        text-align: center;

        &-situation {
            height: 100%;
            min-height: 500px;
            padding: 10px 16px;
            background-color: var(--bg-color2);
            border: 1px solid var(--bg-border-color2);

            &-noData {
                text-align: center;
            }
        }
    }
    .em-situation {
        clear: both;
        &-wrap {
            width: 620px;
            margin: 150px auto;
        }
        &-parent {
            width: 324px;
            height: 57px;
            line-height: 50px;
            margin: 0 auto;
            background: url('../../imgs/situation_parent_bg.png') no-repeat 100% 100%;
            color: var(--info-color);
            img {
                width: 46px;
                height: 50px;
                margin-left: 44px;
                margin-right: 18px;
            }
            span {
                font-size: 22px;
            }
        }
        &-verticaline {
            width: 2px;
            height: 28px;
            margin: 0 auto;
            background: #096e88;
        }
        &-horizontaline {
            width: 540px;
            height: 2px;
            margin: 0 auto;
            background: #096e88;
        }
        &-verticaline4 {
            width: 540px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: start;
            &-item {
                width: 2px;
                height: 16px;
                background: #096e88;
            }
        }
        &-content {
            width: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: start;
            &-item {
                width: 80px;
                text-align: center;
                &--progress {
                    margin-top: 6px;
                }
                &--name {
                    margin-top: 12px;
                    color: var(--label-color);
                }
                &--value {
                    color: var(--info-color);
                    span {
                        font-size: 22px;
                    }
                }
            }
        }
    }
    .ant-progress-text {
        color: var(--info-color) !important;
    }
}
