@import "@/global.less";

.kpi-assess {
    color: #fff;
    padding: 0 20px;
    z-index: 1000;
    position: relative;

    .top-menu {
        display: flex;

        .item {
            width: 170px;
            height: 32px;
            line-height: 32px;
            margin-bottom: 15px;
            text-align: center;
            font-size: 14px;
            background-size: 100% 100%;
            cursor: pointer;
            transition: all 0.2s ease-in;
        }

        .item.active {
            color: @title-color;
        }

        .item0 {
            background-image: url("../../assets/images/Left_b_img.png");
        }

        .item1 {
            background-image: url("../../assets/images/between_b_img.png");
        }

        .item00 {
            background-image: url("../../assets/images/Right_b_img.png");
        }

        .item0.active {
            background-image: url("../../assets/images/Left_a_img.png");
        }

        .item1.active {
            background-image: url("../../assets/images/between_a_img.png");
        }

        .item00.active {
            background-image: url("../../assets/images/Right_a_img.png");
        }

        .item:first-child {
            background-image: url('../../assets/images/Left_b_img.png');
        }

        .item:first-child.active {
            background-image: url('../../assets/images/Left_a_img.png');
        }
    }
}