.hc-agent-charge {
    position: relative;
    .active-menus {
        flex: 1;
        height: 62px;
        display: flex;
        background-color: #F8F8F8;
        border-radius: 10px 10px 0 0;
    }
    .active-item {
        padding: 10px;
        display: flex;
        cursor: pointer;
    }
    .active-select {
        background-color: #FFFFFF;
        border-radius: 10px 0 0 0 ;
    }
    .triangle-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 64px solid #F8F8F8;
        border-right: 30px solid transparent;
    }
    .b-b-b-w {
        border-bottom-color: #FFFFFF;
    }
    .active-body {
        overflow: hidden;
    }
    .info-item{
        position: relative;
        padding: 10px;
        color: #50545E;
        margin-bottom: 10px;
        background-color: #F8FAFF;
        border: 1px solid #EEEEEE;
        border-radius: 10px;
        .frame-warning {
            position: absolute;
            top: 0;
            left: 10px;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .frame-content {
            position: relative;
            font-size: 14px;
            padding-left: 24px;
            width: calc(100% - 220px);
            line-height: 1.5;
            .title-common{
                color: #838791;
            }
            .title-text{
                color: #50545E;
            }
            .title-red{
                margin-left: 6px;
                color: #EB4D3D;
            }
        }
        .frame-time {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 10px;
            color: #838791;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .frame-time.is-more {
            margin-right: 20px;
        }
        .frame-more {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 5px;
            display: flex;
            align-items: center;
            .more-icon {
                color: #838791;
                font-size: 20px;
            }
        }
    }
    .border-bottom-10 {
        border-radius: 0 0 10px 10px;
    }
}

.hc-agent-charge .active-body {
    .hc-no-data-box .no-data-c {
        width: 200px;
    }
    .el-scrollbar__bar.is-vertical {
        right: -9px;
    }
}

.hc-agent-charge-new-table {
    border-spacing: 0;
    border-collapse: collapse;
    border-color: #dddddd;
    width: 100%;
    .new-titile{
        text-align:center;
        width:120px;
        padding: 10px;
        background-color: #F8F8F8;
        color: #838791;
    }
    .new-content{
        text-align:left;
        padding: 10px;
        color: #50545E;
    }
    .new-content .new-img {
        width: 100px;
        height: 100px;
        border-radius: 4px;
        position: absolute;
        background-color: rgba(0,0,0,0.3);
        z-index:99;
        pointer-events: none;
    }
}
