/*
    场景上的数据展示模块
*/


/*
    自定义的字体样式
*/
@font-face {
    font-family: MyFontName;
    src: url("../../assets/font/DS-DIGIT.TTF");
}


#dataViewRelationBox1,
#dataViewRelationBox2,
#dataViewRelationBox3,
#dataViewRelationBox4,
#dataViewRelationBox5
{
    width: 340px;
    height: calc(100vh - 175px);
    margin: 0 auto;
    display: none;
    overflow: auto;
    position: absolute;
    background: #00000055;
    z-index: 6;
    top: 0;
    padding-left: 40px;
}
#dataViewRelationBox{
    width: 600px;
}
#dataViewRelationBox3{
    width: 700px;
    height: calc(100vh - 145px);
    padding-bottom: 30px;
}
#dataViewRelationBox4,
#dataViewRelationBox5{
    width: 450px;
    height: calc(100vh - 145px);
    padding-bottom: 30px;
}
#dataViewRelationBox5{
    padding-bottom: 50px;
}

#dataViewRelationBox5 select,
#dataViewRelationBox5 select option{
    color: #000;
    border: 1px;
}

#dataViewRelationBox *{
    color: #000;
}

#dataViewRelationBox .dataViewRelation-header{
    width: 100%;
    height: 30px;
    background: #c1c1c1;
    text-align: center;
    line-height: 30px;
}
#dataViewRelationBox .dataViewRelation-body{
    width: 100%;
    overflow: hidden;
    /*height: calc(100vh - 60px);*/
}

#dataViewRelationBox .dataViewRelation-body select{
    width: 100%;
}

#dataViewRelationBox .dataViewRelation-body .dataViewRelation-body-left{
    width: 170px;
    float: left;
    /*height: calc(100vh - 60px);*/
}
#hide> div:hover{
    background: #0090D655;
}
#dataViewRelationBox .dataViewRelation-body .dataViewRelation-body-left .orgList #show{
    height: 20px; line-height: 20px; background: #fff; position: relative; border: 1px solid #000;
}
#dataViewRelationBox .dataViewRelation-body .dataViewRelation-body-left .orgList #show i{
    position: absolute;
    right: 5px;
    top: 2px;
}
#dataViewRelationBox .dataViewRelation-body .dataViewRelation-body-left .orgList #hide{
    height: auto;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    border: 1px solid #000;
    border-top: none;
    background: #fff;
    width: 170px;
    position: absolute;
}
#dataViewRelationBox .dataViewRelation-body .dataViewRelation-body-left .orgList #hide div{
    height: 20px;
    line-height: 20px;
}
#dataViewRelationBox .dataViewRelation-body .dataViewRelation-body-left .terminal{
    margin-top: 10px;
}

#dataViewRelationBox .dataViewRelation-body .dataViewRelation-body-left .terminal input{
    padding-left: 5px;
}

#dataViewRelationBox .dataViewRelation-body .dataViewRelation-body-left .terminal .terminalList li{
    padding: 5px 0 0 5px;
}

#dataViewRelationBox .dataViewRelation-body .dataViewRelation-body-right{
    width:calc(100% - 170px);
    float: left;
    /*height: calc(100vh - 60px);*/
    height: auto;
    /*overflow-y: scroll;*/
}

#dataview {
    width: calc(100%);
    height: calc(100%);
    /*background: #097def;*/
    text-align: center;
    pointer-events: none;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    overflow-y: auto;
    /*pointer-events: auto;*/
}

#labelStatus3DSprite span{
    color: red;
}

#dataview::-webkit-scrollbar{
    width: 10px;
}
#dataview::-webkit-scrollbar-track{
    background: #000000;
    border-radius:2px;
}
#dataview::-webkit-scrollbar-thumb{
    background: #444444;
    /*border-radius: 10px;*/
}
#dataview::-webkit-scrollbar-thumb:hover{
    background: #2C2E2Faa;
}

#dataview #template1 {
    width: 100%;
    height: 100%;
    background-image: url("../../images/dataview/bg-1-2.png");
    background-size: 100% 60px;
    background-repeat: no-repeat;
    opacity: 0.8;
}

#dataview .dataview-contentA-box {
    width: 100%;
    text-align: center;
    float: left;
    align-content: center;
}

/*
    数据展示模块的 总标题
*/
#dataview .title {
    width: 300px;
    margin: 0 auto;
    height: 60px;
    line-height: 45px;
    font-size: 18px;
    letter-spacing: 5px;
    /*background-image: url("../../images/dataview/1 (41).png");*/
    /*background-size: 100% 100%;*/
    /*opacity: 1;*/
    /*font-family: MyFontName;*/
}

#dataview .dataview-left {
    width: 380px;
    height: auto;
    float: left;
    border: 1px solid #23282d;
    background: #0000007a;
}

#dataview .dataview-left .flow {
    width: 100%;
    height: 150px;
    background-image: url("../../images/dataview/1234.png");
    background-size: 100% 100%;
    background-color: #23282d29;
    overflow: hidden;
    padding: 5px 0;
}


#dataview .dataview-left .flow * {
    margin: 0;
    padding: 0;
}

#dataview .dataview-left .flow ul {
    margin-top: 10px;
}

#dataview .dataview-left .flow ul li {
    height: 30px;
    line-height: 30px;
}

#dataview .dataview-left .flow ul .subassembly-content {
    width: 90%;
    overflow: hidden;
    /*margin: 0 auto;*/
    margin-left: 10px;
}

#dataview .dataview-left .flow ul .subassembly-name {
    float: left;
    width: 35%;
    letter-spacing: 2px;
}

#dataview .dataview-left .flow ul .subassembly-value {
    float: left;
    font-size: 30px;
    font-family: MyFontName;
    letter-spacing: 3px;
}

#dataview .dataview-left .flow ul .subassembly-unit {
    float: right;
    width: 20%;
}

/*第一个页面中的压力、温度表盘*/
#dataview-left-A #pressure-box,
#dataview-left-A #temperature-box {
    width: calc(100%);
}

#dataview-left-A .pressure,
#dataview-left-A .temperature {
    width: calc(50% - 15px);
    float: left;
    height: auto;
}

/*压力的左侧切换按钮*/
#pressure-nav-box {
    width: 30px;
    float: left;
    height: 150px;
    margin-top: 75px;
}

#pressure-nav-box .pressure-nav {
    height: calc(120px / 4);
    line-height: calc(120px / 4);
    text-align: center;
    font-size: 20px;
    font-family: MyFontName;
    margin: 5px 0;

    background-image: url("../../images/dataview/num/num.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#pressure-nav-box .active {
    background-image: url("../../images/dataview/num/numactive.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*温度的左侧切换按钮*/
#temperature-nav-box {
    width: 30px;
    float: left;
    height: 150px;
    margin-top: 30px;
}

#temperature-nav-box .temperature-nav {
    height: calc(120px / 4);
    line-height: calc(120px / 4);
    text-align: center;
    font-size: 20px;
    font-family: MyFontName;
    margin: 5px 0;

    background-image: url("../../images/dataview/num/num.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#temperature-nav-box .active {
    background-image: url("../../images/dataview/num/numactive.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


/*   压力、温度的标题   */
#dataview-left-A #pressure-box #pressure-title,
#dataview-left-A #temperature-box #temperature-title {
    width: calc(100%);
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    background: #c1c1c133;
    letter-spacing: 10px;
}


/*仪表盘*/
.htmleaf-container {
    float: left;
    width: 100%;
    height: 300px;
}

.btn-container {
    padding: 1em 0;
    text-align: center;
}


/*   数据展示的右侧部分   */
#dataview .dataview-right {
    width: 350px;
    height: auto;
    float: right;
    border: 1px solid #23282d;
    background: #0000007a;
}


/*      退出全屏    */
#preview-body #closePreview {
    display: none;
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 10;
    /*width: 100px;*/
    /*height: 100px;*/
    overflow: hidden;
    color: #000;
    /*background-image: url("../../images/dataview/restore.png");*/
    /*background-repeat: no-repeat;*/
}

#preview-body #closePreview button {
    height: 40px;
    line-height: 20px;
    background: #000000;
    padding: 10px 20px;
}

#preview-body #closePreview button img {
    margin-top: -4px;
}


/*按钮控制温度压力的极值显示（定时、手动切换）   TODO*/
#container-right-detail {
    width: 100%;
    height: 21%;
    border: 1px dashed #ccc;
    margin-top: 10px;
}

.right-detail-box {
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: -10px;
}

#right-detail-title {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

#right-detail-title div {
    height: auto;
    width: 33.2%;
    float: left;
}

#container-right-detail #change-button {
    width: 100%;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 8px;
}

#container-right-detail #change-button button {
    width: 11%;
    background: #3F3A34;
    border: none;
    margin: 0 2px;
    border: 1px solid #E49612;
    color: #fff;
    border-radius: 2px;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
}

#container-right-detail #change-button .active {
    background: #0E4037;
    border: 1px solid #3BEA4D;
    border-radius: 2px;
}

#right-detail-chart1,
#right-detail-chart2,
#right-detail-chart3 {
    width: 140px;
    height: 140px;
    float: left;
    margin-top: 5px;
    margin-left: -15px;
}

#right-detail-units-box {
    position: absolute;
    top: 58%;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
}

#right-detail-units-box div {
    height: auto;
    width: 33.2%;
    float: left;
}

#right-detail-values-box {
    position: absolute;
    top: 70%;
    left: 0;
    width: 100%;
    height: 100%;
}

#right-detail-values-box div {
    height: auto;
    width: 33.2%;
    float: left;
}

#container-right-detail #right-detail-valueA,
#container-right-detail #right-detail-valueB,
#container-right-detail #right-detail-valueC {
    width: 75%;

    /*border: 1px solid #BC1CD4;
    background: #412553; */

    text-align: center;
    margin: 0 auto;
    /*font-size: 12px;*/
    border-radius: 4px;
    color: #03CAF6;
    border: 1px solid #696969;
    background: #00000000;
    box-shadow: 0 0 5px #ccc;
}


/*导航条*/
#dataview-nav {
    width: 100%;
    background-color: #202932;

}

#dataview-nav .dataview-nav-li {
    float: left;
    width: 25%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    letter-spacing: 1px;
}

#dataview-nav .dataview-nav-li:hover {
    background: #c1c1c1;
}

#dataview-nav .active {
    background: #1a8fc7;
}

.dataview-left-content {
    width: 100%;
    /*height: 700px;*/
    background: #0000007a;
}

/*echarts图表*/
#echartsTest {
    width: 100%;
    height: 300px;
}

/*能耗统计*/
#energy-title {
    width: calc(100%);
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    background: #c1c1c133;
    letter-spacing: 10px;
}

.statis-content-detail {
    text-align: center;
}

.statis-content-detail table {
    border: 1px solid #24ADFD;
}

.statis-content-detail table thead {
    background: #063056;
}

.statis-content-detail table thead th {
    border: 1px solid #24ADFD;
    /*border-bottom: 1px solid #24ADFD;*/
}

.statis-content-detail table tbody tr:first-child td {
    color: #24ADFD;
}

#alarm-statis, #alarm-statis1 {
    margin-top: -16px;
}

#alarm-statis th, #alarm-statis1 th, #alarm-statis td, #alarm-statis1 td {
    padding: 3px 10px;
}

.statis-content-detail table td {
    padding: 0 10px;
    font-size: 12px;
}

.statis-content-detail table td .normal {
    width: 100%;
    height: 20px;
    line-height: 20px;
    background: #0E4037;
    border: 1px solid #3BEA4D;
}

.statis-content-detail table td .fault {
    width: 100%;
    height: 20px;
    line-height: 20px;
    background: #3F3A34;
    border: 1px solid #E49612;
}

.statis-content-detail table td .danger {
    width: 100%;
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
    background: #412553;
    border: 1px solid #BC1CD4;
}


/*
    数据展示下方控制显隐的按钮区域
*/
#dataview-control {
    width: calc(100% - 840px);
    height: 50px;
    line-height: 50px;
    background: #0000007a;
    position: fixed;
    bottom: 163px;
    right: 250px;
    overflow: hidden;
}

#dataview-control .btn {
    width: 100px;
    letter-spacing: 5px;
    color: #fff;
    border: 1px solid #00f3ff;
    background: #1b62ab5c;
    font-size: 12px;
    margin: 0 10px;
}

#dataview-control .btn:hover {
    background: #000;
    color: #fff;
}


/*第二页---cop 地温*/
#dataview-cop {
    width: 100%;
    height: 120px;
    /*background-image: url("../../images/dataview/cop1.png");*/
    background-image: url("../../images/dataview/test1.png");
    background-size: 35% 100%;
    position: relative;
}
#dataview-cop-box{
    overflow: hidden;
    position: relative;
}
#dataview-cop-box #dataview-cop-title{
    background: #c1c1c133;
    width: calc(100%);
    height: 30px;
    line-height: 30px;
    letter-spacing: 5px;
    font-size: 14px;
}
#dataview-cop #cop-flow1 {
    position: absolute;
    left: 8px;
    top: 7px;
    font-size: 12px;
    width: 130px;
}

#dataview-cop #cop-temp1 {
    position: absolute;
    left: 240px;
    top: 7px;
    font-size: 12px;
    width: 130px;
}

#dataview-cop #cop-flow2 {
    position: absolute;
    left: 10px;
    bottom: 27px;
    font-size: 12px;
    width: 130px;
}

#dataview-cop #cop-temp2 {
    position: absolute;
    left: 240px;
    bottom: 27px;
    font-size: 12px;
    width: 130px;
}

#dataview-cop #cop-ratio {
    color: #19fff4;
    position: absolute;
    width: 80px;
    top: 43px;
    left: 146px;
    font-weight: bolder;
    font-size: 30px;
    font-family: MyFontName;
}

#dataview-cop #cop-flow1 .value,
#dataview-cop #cop-temp1 .value,
#dataview-cop #cop-flow2 .value,
#dataview-cop #cop-temp2 .value{
    width: 58px;
    display: inline-block;
}
#dataview-cop #cop-flow1 .value span,
#dataview-cop #cop-temp1 .value span,
#dataview-cop #cop-flow2 .value span,
#dataview-cop #cop-temp2 .value span{
    font-size: 18px;
    font-family: MyFontName;
    color: blueviolet;
}
#dataview-cop #cop-flow1 .ratio,
#dataview-cop #cop-temp1 .ratio,
#dataview-cop #cop-flow2 .ratio,
#dataview-cop #cop-temp2 .ratio{
    color: red;
    font-size: 18px;
    font-weight: bolder;
}

/*数据展示第二页的地温统计图表*/
#dataview-temp-title,
#dataview-flow-title{
    background: #c1c1c133;
    width: calc(100%);
    height: 30px;
    line-height: 30px;
    letter-spacing: 5px;
    font-size: 14px;
}
#container-right-chart{
    width: 380px;
    height: 310px;
}
#dataview-flow-box{
    margin-top: 5px;
}
/*流量切换*/
#dataview-flow-contorl{
    width: 100%;
    height: 30px;
}
#dataview-flow-contorl #flow1,
#dataview-flow-contorl #flow2{
    float: left;
    width: 50%;
}
#dataview-flow-contorl #flow1 span,
#dataview-flow-contorl #flow2 span{
    margin-left: -5px;
    letter-spacing: 3px;
}
#dataview-flow-contorl .flow-style{
    margin: 0 auto;
    width: 110px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #00ccff;
    border-radius: 20px;
    background: #00a5ff21;
}
#dataview-flow-contorl .flow-style i{
   margin-right: 5px;
}
#dataview-flow-contorl .active .flow-style{
    background: #000;
    border-color: #fff;
}

#dataview-flow{
    width: 100%;
    height: 140px;
    position: relative;
}

#dataview-flow #dataview-flow-type{
    position: absolute;
    top: 45px;
    left: 136px;
    width: 100px;
    font-size: 14px;
}
#dataview-flow #dataview-flow-unit{
    font-size: 12px;
}
#dataview-flow #dataview-flow-value1,
#dataview-flow #dataview-flow-value2,
#dataview-flow #dataview-flow-value3,
#dataview-flow #dataview-flow-value4{
    position: absolute;
    width: 100px;
    font-size: 20px;
    font-family: MyFontName;
}


#dataview-flow #dataview-flow-value1{
    top: 5px;
    left: 25px;
}
#dataview-flow #dataview-flow-value2{
    top: 5px;
    right: 25px;
}
#dataview-flow #dataview-flow-value3{
    bottom: 12px;
    left: 25px;
}
#dataview-flow #dataview-flow-value4{
    bottom: 12px;
    right: 25px;
}


#cccc{
    display: inline-block;
    height: 110px;
    width: 110px;
    text-align: center;
    background-image: url("../../images/dataview/2.png");
    background-size: 100% 100%;
    color: #FFF;
    border-radius: 100%;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 20s linear infinite;
    animation: rotate 20s linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



@-webkit-keyframes rotateB {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotateB {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}


#aaaa{
    width: 130px;
    height: 130px;
    margin: 15px auto;
    /*margin-top: 15px;*/
    position: relative;
    /*float: left;*/
}
#bbbb{
    position: absolute;
    top: 0;
    left: 0;


    display: inline-block;
    height: 120px;
    width: 120px;
    text-align: center;
    background-image: url("../../images/dataview/1-1.png");
    background-size: 100% 100%;
    color: #FFF;
    border-radius: 100%;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotateB 10s linear infinite;
    animation: rotateB 10s linear infinite;
}
#cccc{
    position: absolute;
    top: 5px;
    left: 5px;
}
#dddd{
    position: absolute;
    top: 15px;
    left: 15px;
}
#eeee{
    position: absolute;
    top: 20px;
    left: 20px;

    display: inline-block;
    text-align: center;
    color: #FFF;
    border-radius: 100%;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 20s linear infinite;
    animation: rotate 20s linear infinite;
}

#cop-value{
    width: 100px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    top: 45px;
    left: 10px;
    font-family: MyFontName;
    font-size: 30px;
}
/*COP的四个块*/
#cop-border1,
#cop-border4{
    background-image: url("../../images/dataview/copborder1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#cop-border2,
#cop-border3{
    background-image: url("../../images/dataview/copborder2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#cop-border1,
#cop-border2,
#cop-border3,
#cop-border4{
    width: 130px;
    height: 40px;
    position: absolute;
}

#cop-border1{
    top: 50px;
    left: 3px;
}
#cop-border2{
    top: 50px;
    right: 12px;
}

#cop-border3{
    bottom: 30px;
    left: 3px;
}
#cop-border4{
    bottom: 30px;
     right: 12px;
 }

.cop-data{
    font-family: MyFontName;
    font-size: 16px;
}
.cop-data .ratio{
    padding-left: 30px;
}


#dataview-cop-value-box{
    width: calc(100% - 130px);
    height: 140px;
    margin-top: 15px;
    float: left;
}

#dataview-cop-value-box .cop-value-name,
#dataview-cop-value-box .cop-value-unit,
#dataview-cop-value-box .cop-value-proportion{
    float: left;
    width: calc(100% / 3);
    height: 30px;
    line-height: 30px;
}

#dataview-cop-value-box .cop-value-unit{
    font-family: MyFontName;
    font-size: 24px;
}


#dataViewRelationBox1,
#dataViewRelationBox2,
#dataViewRelationBox3,
#dataViewRelationBox4{
    display: none;
}

#dataViewRelationBox1 .labelDataChannelBox,
#dataViewRelationBox2 .labelDataChannelBox,
#dataViewRelationBox3 .labelDataChannelBox,
#dataViewRelationBox4 .labelDataChannelBox{
    /*border-left: 1px dashed #000;*/
    margin-left: 5px;
}

/*#dataViewRelationBox1 .labelDataChannelBox{*/
/*    margin-left: 4px;*/
/*}*/
#dataViewRelationBox1 #dataViewRelation1-org-list .labelDataChannelBox{
    margin: -7px 0 0 4px;
}


#dataViewRelationBox1 .label-tree-second{
    display: none;
}
#dataViewRelationBox1 .msg{
    display: inline-block;
    width: calc(100% - 65px);
    background: #000;
    text-align: center;
}

#modelCanvas .select-submit{
    background: #34373b;
    /*border: 1px solid #5d5d5d;*/
    position: sticky;
    top: 0;
    margin-left: -10px;
    height: 30px;
    text-align: center;
    line-height: 27px;
    z-index: 10;
}
#dataViewRelationBox1 .labelDataChannelBox .channelBorder{
    border-top: none;
}
#labelFunRelationTree-pipeline .labelDataChannelBox{
    border-left: none;
}
#dataViewRelationBox1 ul > li,
#dataViewRelationBox2 ul > li,
#dataViewRelationBox3 ul > li,
#dataViewRelationBox5 ul > li{
    margin: -2px 5px;
}

.labelDataChannelBox ol li{
    line-height: 25px;
}

#dataViewRelationBox1 #dataViewRelation1-org-list .labelDataChannelBox .channelFunBox ul li{
    margin: 0 -20px;
}

#dataViewRelationBox1 .labelDataChannelBox ol,
#dataViewRelationBox2 .labelDataChannelBox ol,
#dataViewRelationBox3 .labelDataChannelBox ol,
#dataViewRelationBox5 .labelDataChannelBox ol{
    margin-left: 40px;
}

#dataViewRelationBox1 .labelDataChannelBox ol li,
#dataViewRelationBox2 .labelDataChannelBox ol li,
#dataViewRelationBox3 .labelDataChannelBox ol li,
#dataViewRelationBox5 .labelDataChannelBox ol li{
    position: relative;
}

#dataViewRelationBox1 .labelDataChannelBox .channelBorder,
#dataViewRelationBox2 .labelDataChannelBox .channelBorder,
#dataViewRelationBox3 .labelDataChannelBox .channelBorder,
#dataViewRelationBox5 .labelDataChannelBox .channelBorder{
    width: 40px;
    border-left: 1px dashed #000;
    border-bottom: 1px dashed #000;
    position: absolute;
    left: -40px;
    height: 20px;
    top: -9px;
}

#dataViewRelationBox1 #dataViewRelation1-org-list .labelDataChannelBox .channelBorder{
    border-left: none;
}
/*滚动条样式核心代码*/

#view-model #manageModel #manageModal-tree::-webkit-scrollbar,
#dataViewRelation1-org-list::-webkit-scrollbar,
#modelCanvas .dataview-relation::-webkit-scrollbar{
    width: 10px;
}
#view-model #manageModel #manageModal-tree::-webkit-scrollbar-track,
#dataViewRelation1-org-list::-webkit-scrollbar-track,
#modelCanvas .dataview-relation::-webkit-scrollbar-track{
    background: #000000;
    border-radius:2px;
}
#view-model #manageModel #manageModal-tree::-webkit-scrollbar-thumb,
#dataViewRelation1-org-list::-webkit-scrollbar-thumb,
#modelCanvas .dataview-relation::-webkit-scrollbar-thumb{
    background: #444444;
    /*border-radius: 10px;*/
}
#view-model #manageModel #manageModal-tree::-webkit-scrollbar-thumb:hover,
#dataViewRelation1-org-list::-webkit-scrollbar-thumb:hover,
#modelCanvas .dataview-relation::-webkit-scrollbar-thumb:hover{
    background: #2C2E2Faa;
}
/*核心代码*/


#dataViewRelationBox1 .labelDataChannelBox .lastLiBorder,
#dataViewRelationBox2 .labelDataChannelBox .lastLiBorder,
#dataViewRelationBox3 .labelDataChannelBox .lastLiBorder,
#dataViewRelationBox5 .labelDataChannelBox .lastLiBorder{
    width: 1px;
    height: 10px;
    background: #8d95a0;
    position: absolute;
    left: -41px;
    top: 11px;
}


#dataViewRelationBox5 .labelDataChannelBox > ol > li:first-child .channelBorder{
    height: 15px;
    margin-top: 5px;
}


#dataViewRelationBox3 .labelDataChannelBox .channelFunBorder{
    width: 45px;
    height: 18px;
    border-bottom: 1px dashed #000;
    border-left: 1px dashed #000;
    position: absolute;
    left: -36px;
    top: -6px;
    overflow: hidden;
}
#labelFunRelationTree-pipeline .labelDataChannelBox .channelFunBorder{
    width: 40px;
    left: -40px;
}

#dataViewRelationBox3 > #labelFunRelationTree #labelFunRelationTree-label,
#dataViewRelationBox3 > #labelFunRelationTree #labelFunRelationTree-model,
#dataViewRelationBox3 > #labelFunRelationTree #labelFunRelationTree-pipeline{
    position: relative;
}

#dataViewRelationBox3 > #labelFunRelationTree .treeType{
    background: #0077ad85;
    border: 1px solid #0299de;
    width:fit-content;
    width: fit-content;
    width:-moz-fit-content;
}

#dataViewRelationBox3 > #labelFunRelationTree #labelFunRelationTree-label-tree,
#dataViewRelationBox3 > #labelFunRelationTree #labelFunRelationTree-model-tree,
#dataViewRelationBox3 > #labelFunRelationTree #labelFunRelationTree-pipeline-tree{
    margin-left: 40px;
    margin-top: 8px;
}

#dataViewRelationBox3 #labelFunRelationTree .labelFunRelationTree-child-border{
    width: 37px;
    height: 16px;
    border-bottom: 1px dashed #000;
    border-left: 1px dashed #000;
    position: absolute;
    left: 6px;
    top: 22px;
    overflow: hidden;
}

#dataViewRelationBox3 .labelDataChannelBox .lastLiBorder{
    width: 1px;
    height: calc(100%);
    background: #8d95a0;
    position: absolute;
    left: -41px;
    top: 11px;
}
#dataViewRelationBox3 .labelDataChannelBox .channelFunBox{
    margin-top: 5px;
    margin-left: 36px;
}
#dataViewRelationBox3 .labelDataChannelBox .channelFunBox > ul > li > .eventTreeLi{
    margin-left: 10px;
}

/*标签的事件绑定树结构*/
#dataViewRelationBox3 #labelFunRelationTree,
#dataViewRelationBox4 #buttons {
    width: calc(50%);
    float: left;
    border-right: 1px solid #5db8ec;
}
#dataViewRelationBox4 #buttons,
#dataViewRelationBox4 > #motion-points-list{
    width: calc(25%);
    float: left;
    height: auto;
    min-height: 100px;
    border-right: 1px solid #5db8ec;
}
#dataViewRelationBox4 #buttons > h5,
#dataViewRelationBox4 > #motion-points-list > h5{
    color: #e4ff00;
}

#dataViewRelationBox3 #labelFunRelation,
#dataViewRelationBox4 #buttonsFun{
    width: calc(50%);
    height: auto;
    float: left;
    overflow: hidden;
}
#dataViewRelationBox3 #labelFunRelation #labelFunCreate,
#dataViewRelationBox4 #buttons #buttosCreate{
    width: calc(100%);
    float: left;
}
#dataViewRelationBox3 #labelFunRelation #labelFunRelation-list{
    width: calc(50% - 20px);
    float: left;
    margin: 20px 0 0 15px;
    overflow: hidden;
}
#dataViewRelationBox3 #labelFunRelation #labelFunRelation-attr,
#dataViewRelationBox4 #buttons #buttonsFun #buttons-attr{
    width: calc(50%);
    height: 180px;
    margin: 20px 0 0 5px;
    float: left;
    border: 1px solid #000;
    overflow: hidden;
}

#dataViewRelationBox5 > #alarmTreeBox,
#dataViewRelationBox5 > #alarmButtonBox {
    width: calc(50%);
    float: left;
}
#dataViewRelationBox5 > #alarmTreeBox .labelDataChannelBox {
    border-left: 1px dashed #000;
}

#labelFunRelation-attr input,
#buttons-attr-attr input,
#buttons-setattr input{
    color: #000;
}

#dataViewRelationBox3 #labelFunRelation #labelFunRelation-attr div，
#dataViewRelationBox4 #buttons #buttons-attr div{
    margin: 15px 0;
}
#dataViewRelationBox3 #labelFunRelation #labelFunRelation-attr span,
#dataViewRelationBox4 #buttons #buttons-attr span{
    width: 40px;
    text-align: center;
    display: inline-block;
}
#dataViewRelationBox3 #labelFunRelation #labelFunRelation-attr input,
#dataViewRelationBox4 #buttons #buttons-attr input{
    width: calc(100% - 45px);
}
#dataViewRelationBox3 #labelFunRelation #labelFunRelation-list li{
    margin-bottom: 10px;
}
#dataViewRelationBox3 #labelFunRelation #labelFunCreate .btn-xs,
#dataViewRelationBox4 #buttons #buttosCreate .btn-xs{
    width: calc(100% / 3 - 6px);
    margin-left: 2px;
}

#dataViewRelationBox3 > #labelFunRelation > #labelFunRelation-attr > #labelAttr-terminal{
    margin-top: 20px;
}
#dataViewRelationBox3 > #labelFunRelation > #labelFunRelation-attr > #labelAttr-terminal > div{
    margin: 5px 0;
}
#dataViewRelationBox3 > #labelFunRelation > #labelFunRelation-attr > #labelAttr-terminal span{
    width: 60px;
}
#dataViewRelationBox3 > #labelFunRelation > #labelFunRelation-attr > #labelAttr-terminal * {
    color: #000;
}
#dataViewRelationBox3 > #labelFunRelation > #labelFunRelation-attr > #labelAttr-terminal #terminal-name-list{
    /*max-width: 89px;*/
}


#dataViewRelationBox4 #buttonsFun #buttons-attr{
    overflow: hidden;
}
#dataViewRelationBox4 #buttonsFun #buttons-attr #buttons-list{
    width: calc(50%);
    height: auto;
    min-height: 64px;
    float: left;
    text-align: center;
}
#dataViewRelationBox4 #buttonsFun #buttons-attr #buttons-list li{
    margin: 10px 0;
}
#dataViewRelationBox4 #buttonsFun #buttons-attr #buttons-setattr{
    width: calc(50%);
    height: auto;
    float: left;
}

/*
    左侧控制部分的样式
*/
/*#scene-control{*/
/*    width: 220px;*/
/*    height: calc(100vh);*/
/*    position: fixed;*/
/*    left: 0;*/
/*    top: 0;*/
/*    background: #0000006b;*/
/*    pointer-events: none;*/
/*    overflow: hidden;*/
/*}*/
/*#scene-control > #scene-contorl-nav{*/
/*    width: 49px;*/
/*    height: calc(100% - 55px);*/
/*    background: #00000085;*/
/*    float: left;*/
/*    border-right: 1px solid #cec5c5c9;*/
/*}*/
/*#scene-control > #scene-contorl-nav > .scene-contorl-nav-li{*/
/*    text-align: center;*/
/*    padding: 10px 0;*/
/*    pointer-events: auto;*/
/*}*/
/*#scene-contorl-toggle{*/
/*    text-align: center;*/
/*    padding: 10px 0;*/
/*    position: fixed;*/
/*    bottom: 0;*/
/*    width: 49px;*/
/*    height: 55px;*/
/*    background: #00000085;*/
/*    border-right: 1px solid #cec5c5c9;*/
/*}*/
/*#scene-control > #scene-contorl-nav > .scene-contorl-nav-li > i,*/
/*#scene-contorl-nav-toggle > i{*/
/*    font-size: 20px;*/
/*}*/
/*#scene-control > #scene-contorl-abbr{*/
/*    width: calc(100% - 50px);*/
/*    height: 100%;*/
/*    float: left;*/
/*    overflow: hidden;*/
/*}*/
/*#scene-control > #scene-contorl-abbr > #scene-control-logo{*/
/*    background: url('../../images/logo.png');*/
/*    background-size: 100% 100%;*/
/*    height: 50px;*/
/*}*/
/*#scene-control > #scene-contorl-abbr > #scene-contorl-abbr-content{*/
/*    height: calc(100% - 60px);*/
/*    margin-top: 10px;*/
/*}*/
/*#scene-control > #scene-contorl-abbr > #scene-contorl-abbr-content > .scene-contorl-abbr-li {*/
/*    margin: 0px 2px 5px 2px;*/
/*    width: calc(50% - 4px);*/
/*    !*height: 100px;*!*/
/*    height: auto;*/
/*    float: left;*/
/*    pointer-events: auto;*/
/*}*/
/*#scene-control > #scene-contorl-abbr > #scene-contorl-abbr-content > .scene-contorl-abbr-li > .scene-contorl-abbr-li-icon{*/
/*    width: 80%;*/
/*    height: 60px;*/
/*    margin: 0 auto;*/
/*    text-align: center;*/
/*    background: #00000055;*/
/*}*/
/*#scene-control > #scene-contorl-abbr > #scene-contorl-abbr-content > .scene-contorl-abbr-li > .scene-contorl-abbr-li-name{*/
/*    width: 70%;*/
/*    !*height: 40px;*!*/
/*    margin: 0 auto;*/
/*}*/
/*#scene-control > #scene-contorl-abbr > #scene-contorl-abbr-content > .scene-contorl-abbr-li > .scene-contorl-abbr-li-icon > i{*/
/*    font-size: 30px;*/
/*    line-height: 60px;*/
/*}*/

#motionPointView{
    width: 340px;
    height:500px;
    margin: 0 auto;
    display: none;
    overflow: auto;
    position: absolute;
    background: #c1c1c155;
    z-index: 6;
    top: 0;
    padding-left: 40px;
}
#motionPointView > #motion-point-list > #motion-point-name > input{
    color: #000;
}
#motionPointView > #motion-point-list,
#motionPointView > #motion-point-contorl{
    float: left;
    width: 50%;
}
#motionPointView > #motion-point-list > #motion-point-name{
    width: 127px;
    overflow: hidden;
}
#motionPointView > #motion-point-list > #motion-point-name input{
    height: 22px;
}

/*
    项目展示的配置部分
*/
#modelCanvas > #sceneConfigWindow{
    width: auto;
    height: calc(100%);
    margin: 0 auto;
    display: none;
    overflow: auto;
    position: absolute;
    background: #0000006b;
    z-index: 6;
    top: 0;
    padding: 0 0 60px 30px;
}
#modelCanvas > #sceneConfigWindow > #sceneConfigWindow-logo{
    width: 100%;
    height: 60px;
    border: 1px solid #fff;
    padding: 10px 0;
    margin: 0 auto;
    text-align: center;
}
#modelCanvas > #sceneConfigWindow > #sceneConfigWindow-logo > img{
    display: inline-block;
}
#modelCanvas > #sceneConfigWindow > #clearLogo{
    position: absolute;
    right: 2px;
    top: 2px;
    background: #000;
    border-color: #000;
}

#groupTree{
    width: 302px;
    overflow: hidden;
    border: 1px solid #000;
}
#groupTree > li > .treeNode{
    height: auto;
    margin-left: 40px;
    float: left;
    overflow: hidden;
}
#groupTree > li,
#groupTree > li > .treeNode > ol > li{
    overflow: hidden;
}
#groupTree li > .icon{
    width: 30px;
    float: left;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
}
#groupTree li > .title{
    display: inline-block;
    width: calc(100% - 30px);
    height: 30px;
    float: left;
    line-height: 30px;
}
#groupTree li > .title input{
    color: #000;
}
#groupTree li > .iconBox{
    margin-left: 2px;
}
#groupTree li > .iconBox label{
    width: 39px;
    overflow: hidden;
    height: 37px;
    border: 1px solid #000;
    display: inline-block;
    /*margin: 5px 1px;*/
    text-align: center;
    background: #c5c5c575;
}
#groupTree li > .iconBox label i{
    color: #fff;
    font-size: 26px;
    line-height: 37px;
}
#groupTree li .title span{
    display: inline-block;
    width: 150px;
}

#modalWindow .modal-header,
#modalWindow .modal-footer{
    padding: 7px 15px;
    background: #99999955;
}

#modalWindow .modal-body{
    padding: 0;
}

#sceneConfigWindow #eventBtnUtil{
    width: 200px;
    height: auto;
    display: none;
    border: 1px solid #000;
    position: fixed;
    top: 146px;
    left: 45%;
}
#sceneConfigWindow #eventBtnUtil .eventBtnUtilHead{
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #c8c8c855;
}

#sceneConfigWindow #eventBtnUtil .eventBtnUtilHead > i{
    float: right;
    margin-top: 7px;
    margin-right: 2px;
}
#sceneConfigWindow #eventBtnUtil .eventBtnUtilListBox{
    width: calc(45.8%);
    text-align: center;
    background: red;
    height: 30px;
    margin: 10px 4px;
    float: left;
}

#sceneConfigWindow #eventBtnUtil select,
#sceneConfigWindow #eventBtnUtil select option{
    color: #000;
    width: 100%;
    height: 30px;
    line-height: 30px;
}

#eventBtnUtilFun{
    background: #c8c8c855;
    width: calc(100%);
    height: 28px;
    line-height: 30px;
    float: left;
    text-align: right;
}