DAYE_RDMS_CCFLOW/CCFlow/.svn/pristine/e0/e084302d6913f8e60810831787a9f2912cf7f1a0.svn-base


.DashbCon{display: flex;flex-direction:row;width: 90%;margin:0 auto}
.DashbCon>div{flex: 1;position: relative;height: 130px;overflow: hidden;}
.DashbCon .multiple{display: flex;flex-direction: column;}
.DashbCon .circle{
    font-size: 12px;
    padding-right:5px;
    position: relative;
    padding-left:10px;
}
.DashbCon .circle>div{
    position: absolute;
    width: 10px;
    height: 10px;
    background: gray;
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
    left: 0
}
.DashbCon .daughter{
    flex: 1;
    position: relative;
}
.DashbCon .circleDot ,.roundDot{
    position: absolute;
    background: white;
    z-index: 10;
    padding: 0 10px;
}
.DashbCon .roundDot .circle{
    float:left;
    font-size: 12px;
    align-items: center;
    display: -webkit-flex;
    height: 100%;
}
.DashbCon .circleDot{
    left:50%;
    transform: translate(-50%,-50%);
    top:50%;
    align-items:center;
    display: -webkit-flex;
}
.DashbCon .roundDot{
    top:50%;
    transform: translateY(-50%);
}
.DashbCon .roundDot .data{
    font-size: 12px;
    background: white;
    padding-left: 5px;
    align-items: center;
    display: -webkit-flex;
    float:left;
    height: 100%
}
.DashbCon .roundDot .name{
    font-size: 12px;
    align-items: center;
    display: -webkit-flex;
    float:left;
    height: 100%
}
.DashbCon .finishColor{
    background: #3385ff;
}
.DashbCon .procedure{
    background: #eee;;
}
.DashbCon .contentCon{
    width: 100%;
    position: absolute;
    left:50%;
    top:105px;
    transform: translate(-50%,-50%);
    text-align: center;
}
.DashbCon .alone p{
    font-size: 12px;
    line-height: 20px;
}
.DashbCon>div .figure{
    width: 100%;
    height: 2px;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}
.DashbCon>div:first-child .figure{
    width: calc(50% - 20px);
    height: 2px;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right: 0;
}
.DashbCon>div:last-child .figure{
    width: calc(50% - 20px);
    height: 2px;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left: 0;
}
.DashbCon .multiple .figure{
    position: absolute;
    width: calc(100% - 20px);
    height: 2px;
    top:50%;
    transform: translateY(-50%);
    left: 50%;
}
.DashbCon .gray .circle div{
    background:gray;
}
.DashbCon .gray .figure{
    background: gray;
}
.DashbCon .gray .contentCon p{
    color:gray ;
}
.DashbCon .green .circle div{
    background: #409EFF;
}
.DashbCon .green .figure{
    background: #409EFF;
}
.DashbCon .red .circle div{
    background: #F56C6C;
}
.DashbCon .red .figure{
    background:#F56C6C;
}
.DashbCon .green{
    color:#409EFF!important;
}
.DashbCon .gray .data{
    color: gray;
}


.Dashboard2Warn{
    font-size: 12px;
    color:red;
    text-indent: 1em
}
.Dashboard2 .downLoad{
    display: inline-block
}
.Dashboard2 .upBtn .el-form-item__content{
    /*width: 95px!important;*/
    height:30px!important;
    /*overflow: hidden*/
}