.ml0{
    margin-left: 0;
}
.ml6{
    margin-left: 6px;
}
.ml8{
    margin-left: 8px;
}
.ml10 {
    margin-left: 10px;
}
.ml10i {
    margin-left: 10px!important;
}
.ml12 {
    margin-left: 12px;
}
.ml15{
    margin-left: 15px;
}
.ml18{
    margin-left: 18px;
}
.ml20{
    margin-left: 20px;
}
.ml30{
    margin-left: 30px;
}
.ml40{
    margin-left: 40px;
}
.mb0{
    margin-bottom: 0;
}
.mb10{
    margin-bottom: 10px;
}
.mb12{
    margin-bottom: 12px;
}
.mb16{
    margin-bottom: 16px;
}
.mb20{
    margin-bottom: 20px;
}
.mr0{
    margin-right: 0;
}
.mr4{
    margin-right: 4px!important;
}
.mr5{
    margin-right: 5px;
}
.mr6{
    margin-right: 6px;
}
.mr8{
    margin-right: 8px!important;
}
.mr10{
    margin-right: 10px;
}
.mr10i{
    margin-right: 10px!important;
}
.mr12{
    margin-right: 12px;
}
.mr25{
    margin-right: 25px;
}
.mt_2{
    margin-top: -2px!important;
}
.mt0{
    margin-top: 0!important;
}
.mt2{
    margin-top: 2px;
}
.mt4{
    margin-top: 4px;
}
.mt5{
    margin-top: 5px;
}
.mt6{
    margin-top: 6px;
}
.mt8{
    margin-top: 8px;
}
.mt10{
    margin-top: 10px;
}
.mt12{
    margin-top:12px;
}
.mt13{
    margin-top:13px;
}
.mt16{
    margin-top: 16px;
}
.mt17{
    margin-top: 17px;
}
.mt20{
    margin-top: 20px;
}
.flex{
    display: flex;
}
.flex.flex-grow{
    flex-grow: 1;
}
.flex.align-i-center{
    align-items: center;
}
.flex.align-i-start{
    align-items: flex-start;
}
.flex.align-i-end{
    align-items: flex-end;
}
.flex.justify-c-space-b{
    justify-content: space-between;
}
.flex.justify-c-space-a{
    justify-content: space-around;
}
.flex.justify-c-center{
    justify-content: center;
}
.flex.justify-c-start{
    justify-content: flex-start;
}
.flex.justify-c-end{
    justify-content: flex-end;
}
.flex.flex-direction-column{
    flex-direction: column;
}
.font12{
    font-size: 12px;
}
.font13{
    font-size: 13px;
}
.font14{
    font-size: 14px;
}
.padding1{
    padding:1px;
}
.pl6{
    padding-left: 6px;
}
.pl10{
    padding-left: 10px;
}
.pl16{
    padding-left: 16px;
}
.pr10{
    padding-right: 10px;
}
.pr20{
    padding-right: 20px;
}
.pr21{
    padding-right: 21px;
}
.pr22{
    padding-right: 22px;
}
.pt10{
    padding-top: 10px;
}
.pt20{
    padding-top: 20px;
}
.pb20{
    padding-bottom: 20px;
}
.pb10{
    padding-bottom: 10px;
}
.w50{
    width: 50px;
}
.w72{
    width: 72px;
}
.w100{
    width:100px;
}
.w50p{
    width: 50%;
}
.w98p{
    width: 98%;
}
.w100p{
    width:100%;
}
.w180{
    width: 180px;
}
.w200{
    width:200px
}
.w210{
    width: 210px;
}
.h15{
    height: 15px;
}
.h22{
    height:22px;
}
.h30{
    height:30px!important;
}
.h100p{
    height: 100%;
}
.w100p{
    width: 100%;
}
.bt1-grey{
    border-top: 1px solid #dadce0;
}
.outline-none{
    outline: none;
}
.border-solid-t{
    border-top: 1px solid #666666FF;
}
.border-color-EEF3F9FF{
    border-color: #EEF3F9FF;
}
.border-solid-r{
    border-right: 1px solid #EEF3F9FF;
}
.border-dashed-t{
    border-top: 1px dashed #666666FF;
}
.border-dotted-t{
    border-top: 1px dotted #666666FF;
}
.border-solid-t-dddddd{
    border-top:1px solid #dddddd;
}
.border-solid-grey{
    border: 1px solid #ccced2;
}
.border-solid-grey2{
    border: 1px solid #EEF3F9;
}
.pointer{
    cursor: pointer;
}
.event-none{
    pointer-events:none!important;
}
.btn-primary {
    color: #fff;
    border-color: #498EFF;
    background: #498EFF;
}
.btn.btn-primary.btn-noline,
.btn-primary.btn-noline:focus,
.btn-primary.btn-noline.open,
.btn-primary.btn-noline:hover{
    background: none!important;
    color: #498EFF!important;
    border-color: #ffffff!important;
}
.btn-primary:focus,
.btn-primary.open,
.btn-primary:hover{
    background-color: #498EFF!important;
    border-color: #498EFF!important;
}
.btn-outline.btn-primary {
    border-color: #498EFF;
    color: #498EFF;
}
.btn-outline.btn-primary:hover,
.btn-outline.btn-primary:focus{
    background-color: #498EFF;
    border-color: #498EFF;
}
.module-title{
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}
.module-row{
    width: 100%;
}
.mm-dropdown{

}

/*tree*/
.tree-component span[treenode_ico]{
    display: none!important;
}
.tree-component span.switch.center_close:before,
.tree-component span.switch.bottom_close:before,
.tree-component span.switch.root_close:before{
    content: "\f0da"!important;
}
.tree-component span.switch.center_open:before,
.tree-component span.switch.bottom_open:before,
.tree-component span.switch.root_open:before{
    content:"\f0d7"!important;
}
.tree-component{
    zoom:1.2;
}
.tree-component .node_name{
    color:#333333;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 16px;
    -webkit-background-clip: text;
}
.tree-component  .curSelectedNode .node_name{
    background: rgb(236, 243, 255)!important;
}
.tree-component a.curSelectedNode{
    background: rgb(236, 243, 255)!important;
}
.tree-component span[treenode_ico]{
    display: none!important;
}
#tree_1_a{
    font-weight: bold!important;
}
.select-group-component .select-button{
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color:#9ca2ae;
}

/*dialog*/
.modal-footer{
    background: #ffffff;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e5e5e5;
}
.modal-footer .btn{
    border-radius: 2px;
}

/*bg-color*/
.bg.no-color{
    background: #ffffff00!important;
}

/*font-color*/
.color-grey{
    color: #999999!important;
}

/*font-size*/
.fs14{
    font-size: 14px!important;
}

/*margin*/
.mr0{
    margin-right: 0!important;
}

/*modal-dialog*/
.modal-dialog .modal-title{
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

.form-input input{
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.many2one-box .chosen-container-single .chosen-single {
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.c-select select{
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.c-textarea textarea{
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.form-control{
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.form-control-static .form-label {
    color: #333333;
}

.c-image img{
    height: 60px;
    margin-right: 16px;
}
.c-image .add-btn{
    padding:6px 12px!important;
}
.c-image .desc{
    margin-left: 12px;
    font-size: 12px;
    color: #999999;
}

/*chosen*/
.chosen-container-active .chosen-choices{
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: none;
}
.chosen-container-multi .chosen-choices {
    /*border-radius: 2px!important;*/
    /*border: 1px solid rgba(0, 0, 0, 0.15)!important;*/
    /*box-shadow: none!important;*/
    /*background-color: #ffffff00!important;*/
    /*background-image: none!important;*/
}
.chosen-container-multi .chosen-choices li.search-choice span{
    color:#9ca2ae!important;
}
.chosen-container-multi .chosen-choices li.search-choice{
    background-color: #f5f7f9!important;
}
.group-select-dropdown .select-button {
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 12px;
}
.group-select-dropdown .select-button:hover{
    background: unset;
}
.group-select-dropdown .select-button:focus{
    background: unset;
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow:0px 0px 0px 2px #66afe940!important;
    box-shadow:0px 0px 0px 2px #66afe940!important;
}

.select-company-div {
    display: inline-block;
    border: 1px #498EFF solid;
}
.select-company-div .appTypeSwitchBtnItem.active {
    background: #498EFF;
    color: #fff;
    border: 1px #498EFF solid;
}
.select-company-div .appTypeSwitchBtnItem:last-child {
    border-right: none;
}
.select-company-div .appTypeSwitchBtnItem {
    display: inline-block;
    float: left;
    padding: 4px 9px;
    border-right: 1px #498EFF solid;
    cursor: pointer;
    color: #498EFF;
    width: 120px;
    text-align: center;
}
.publish-dialog .chosen-container-multi {
    width: 100% !important;
}

@media screen and (min-width: 1800px) {
    .deviceView-list-module .deviceView-item ,
    .app-list-module .app-item{
        max-width: calc((100vw - 15*2px - 20*2px - 320px - 20px - 5*20px)/4)!important;
        flex-grow: 1;
    }
}
@media screen and (min-width: 1440px) and (max-width: 1800px) {
    .deviceView-list-module .deviceView-item ,
    .app-list-module .app-item{
        max-width: calc((100vw - 15*2px - 20*2px - 320px - 20px - 4*20px)/3)!important;
        flex-grow: 1;
    }
}
.ztree {
    font-family:"Microsoft YaHei,微软雅黑,Helvetica, Arial, sans-serif"!important;
}
.chosen-container-multi .chosen-choices li.search-choice span{
    color: #465066!important;
}
.chosen-container-multi .chosen-choices li.search-choice{
    background:  white!important;
}
.fw600{
    font-weight: 600!important;
}
.f40{
    font-size: 40px!important;
}

.displayNoneI{
    display: none!important;
}
.display-none{
    display: none;
}
.position-relative{
    position: relative;
}
.block-20 {
    width: 20px;
    height: 20px;
}
.border-bottom-none{
    border-bottom: none!important;
}
.pageAndLayoutContainer{
    height: 200px;
}
.pageAndLayoutContainer .monitorPageDiv {
    display: none;
}
.pageAndLayoutContainer.pageList .monitorPageDiv {
    display: block;
}
.pageAndLayoutContainer .monitorLayerDiv {
    display: none;
}
.pageAndLayoutContainer.layoutList .monitorLayerDiv {
    display: block;
}
.test-icon{
    width: 30px;
    height: 20px;
    background: url("../monitor/images/template/template_more.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 16px;
}
.formatGeometryLeft,
.formatGeometryTop,
.formatGeometryWidth,
.formatGeometryHeight,
.formatGeometryRotate{
    align-items: center;
}
.formatGeometryLeft .inputIcon,
.formatGeometryTop .inputIcon,
.formatGeometryWidth .inputIcon,
.formatGeometryHeight .inputIcon{
    color: #4B8CFC;
    position: absolute!important;
    zoom: 0.8;
    margin-left: 5px;
}
.formatGeometryLeft .inputIcon{

}
.formatGeometryRotate .inputIcon{
    position: absolute!important;
    margin-left: 5px;
}
.formatGeometryRotate .inputIcon {
    width: 11px;
    height: 11px;
    background: url("../monitor/images/format/rotateIcon.png");
    background-size: 100%;
}
.data-panel-setting-item .right {
    display: flex;
    align-items: center;
}
.data-panel-setting-item{
    color: #999999;
}
.data-panel-setting-item .exeName{
    color: #999999;
}
.data-panel-setting-item .exeValue {
    margin-left: 5px;
    margin-right: 8px;
    color: #4B8CFC;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}